BenoService

آکادمی بنو/آموزش Tailwind

Dark Mode و سفارشی‌سازی در Tailwind CSS

بهنام نوبخت · ۱۴۰۵/۷/۱۳

در بسیاری از سایت‌ها و اپلیکیشن‌های امروزی، کاربران می‌توانند بین حالت روشن و تاریک انتخاب کنند. حالت روشن معمولاً با پس‌زمینه‌های روشن و متن تیره طراحی می‌شود، در حالی که Dark Mode از رنگ‌های تیره برای کاهش روشنایی ظاهری صفحه استفاده می‌کند. Tailwind CSS امکان ایجاد Dark Mode را با استفاده از Variant مخصوص dark: فراهم می‌کند. علاوه بر Dark Mode، می‌توانیم ظاهر پروژه را نیز متناسب با نیاز خودمان سفارشی کنیم؛ برای مثال رنگ‌های اختصاصی، فونت، Container و برخی مقادیر طراحی را تنظیم کنیم. در این مقاله ابتدا Dark Mode را یاد می‌گیریم، سپس یک صفحه واقعی با حالت روشن و تاریک می‌سازیم و در پایان با اصول پایه سفارشی‌سازی Tailwind CSS آشنا می‌شویم.

Dark Mode چیست؟

Dark Mode یا حالت تاریک، نسخه‌ای از رابط کاربری است که بیشتر از رنگ‌های تیره استفاده می‌کند.

یک صفحه در حالت روشن می‌تواند چنین ساختاری داشته باشد:

Light Mode

White Background
Dark Text
Light Cards

و در حالت تاریک:

Dark Mode

Dark Background
Light Text
Dark Cards

هدف Dark Mode فقط تغییر رنگ Background نیست؛ معمولاً باید چند بخش رابط کاربری با یکدیگر هماهنگ شوند.

Variant مربوط به Dark Mode

در Tailwind CSS می‌توانیم از:

dark:

استفاده کنیم.

برای مثال:

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
    Hello Tailwind
</div>

در حالت عادی:

bg-white
text-gray-900

اعمال می‌شود.

و در Dark Mode:

dark:bg-gray-900
dark:text-white

فعال می‌شوند.

طراحی یک Card با Dark Mode

یک Card ساده:

<div
    class="rounded-xl border border-gray-200
           bg-white p-6 text-gray-900
           dark:border-gray-700
           dark:bg-gray-800
           dark:text-white"
>

    <h2 class="text-xl font-bold">
        Product Title
    </h2>

    <p class="mt-3 text-gray-600 dark:text-gray-300">
        Product description goes here.
    </p>

</div>

در Light Mode:

White Card
Dark Text
Gray Description

در Dark Mode:

Dark Card
White Text
Light Description

Dark Mode برای کل صفحه

می‌توانیم Background کل صفحه را تغییر دهیم:

<body class="bg-white text-gray-900 dark:bg-gray-950 dark:text-white">

حالا با فعال شدن Dark Mode، رنگ پایه صفحه نیز تغییر می‌کند.

رنگ متن در Dark Mode

یکی از اشتباهات رایج این است که متن را در Dark Mode کاملاً سفید کنیم.

برای متن اصلی می‌توانیم از سفید یا رنگ روشن استفاده کنیم:

<h1 class="text-gray-900 dark:text-white">
    عنوان صفحه
</h1>

اما برای متن فرعی بهتر است از رنگی مانند:

text-gray-600 dark:text-gray-300

استفاده کنیم.

این کار باعث ایجاد سلسله‌مراتب بصری بهتر می‌شود.

Border در Dark Mode

Border نیز باید متناسب با Background تغییر کند.

<div
    class="border border-gray-200
           dark:border-gray-700"
>
    Content
</div>

در Light Mode:

Light Border

در Dark Mode:

Dark Border

Shadow در Dark Mode

گاهی لازم است Shadow نیز تغییر کند.

مثلاً:

<div
    class="bg-white shadow-md
           dark:bg-gray-800 dark:shadow-none"
>
    Card
</div>

در Dark Mode ممکن است Shadow روشن روی Background تیره نتیجه مناسبی نداشته باشد؛ بنابراین می‌توانیم آن را حذف یا متناسب با طراحی تغییر دهیم.

ساخت یک صفحه کامل با Dark Mode

حالا یک صفحه ساده ایجاد می‌کنیم:

<body class="bg-gray-100 text-gray-900 dark:bg-gray-950 dark:text-white">

    <header class="border-b bg-white dark:border-gray-800 dark:bg-gray-900">

        <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">

            <a href="#" class="text-xl font-bold">
                MyStore
            </a>

            <nav class="hidden gap-6 md:flex">

                <a
                    href="#"
                    class="text-gray-600 hover:text-blue-600
                           dark:text-gray-300 dark:hover:text-blue-400"
                >
                    Home
                </a>

                <a
                    href="#"
                    class="text-gray-600 hover:text-blue-600
                           dark:text-gray-300 dark:hover:text-blue-400"
                >
                    Products
                </a>

                <a
                    href="#"
                    class="text-gray-600 hover:text-blue-600
                           dark:text-gray-300 dark:hover:text-blue-400"
                >
                    About
                </a>

            </nav>

        </div>

    </header>

    <main class="mx-auto max-w-7xl px-6 py-12">

        <h1 class="text-3xl font-bold md:text-5xl">
            Welcome to MyStore
        </h1>

        <p class="mt-4 max-w-2xl text-gray-600 dark:text-gray-300">
            Discover our latest products and explore
            our modern online store.
        </p>

    </main>

</body>

در این مثال تقریباً تمام بخش‌های اصلی صفحه برای Dark Mode آماده شده‌اند.

Dark Mode برای Button

Button نیز باید در هر دو حالت قابل مشاهده باشد.

<button
    class="rounded-lg bg-blue-600 px-6 py-3
           font-semibold text-white
           hover:bg-blue-700
           dark:bg-blue-500
           dark:hover:bg-blue-600"
>
    شروع کنید
</button>

در این مثال رنگ Button در Dark Mode کمی تغییر کرده است.

Dark Mode برای Input

فرم‌ها نیز باید به Dark Mode توجه کنند.

<input
    type="text"
    placeholder="نام خود را وارد کنید"
    class="w-full rounded-lg border
           border-gray-300 bg-white px-4 py-3
           text-gray-900
           placeholder:text-gray-400
           focus:border-blue-500
           focus:ring-2 focus:ring-blue-200
           dark:border-gray-700
           dark:bg-gray-800
           dark:text-white
           dark:placeholder:text-gray-500"
>

در Dark Mode:

Background → Dark
Text → Light
Border → Dark Gray
Placeholder → Gray

فعال کردن Dark Mode

در پروژه‌های Tailwind CSS باید مشخص شود Dark Mode بر چه اساسی فعال شود.

در طراحی‌های جدید Tailwind، می‌توان Dark Mode را با یک Selector مانند کلاس dark کنترل کرد.

برای این روش می‌توان در CSS پروژه تنظیم مربوط به Dark Mode را تعریف کرد و سپس کلاس dark را روی یک عنصر والد مانند html قرار داد.

یک الگوی ساده:

<html class="dark">

در این حالت عناصر دارای dark: می‌توانند Style تاریک خود را دریافت کنند.

برای حالت روشن:

<html>

کلاس dark وجود ندارد.

نکته: در یک پروژه واقعی معمولاً این تغییر با JavaScript، تنظیمات سیستم‌عامل یا یک Theme Manager انجام می‌شود. در این مقاله تمرکز ما روی ساختار Tailwind است، نه پیاده‌سازی کامل Theme Switcher.

ساخت Theme Switcher ساده

برای تغییر Theme در یک پروژه واقعی، معمولاً به JavaScript نیاز داریم.

ساختار مفهومی آن:

User clicks Theme Button
          ↓
JavaScript
          ↓
Add / Remove "dark"
          ↓
Tailwind dark: utilities
          ↓
UI changes

مثلاً:

<button id="themeButton">
    Toggle Theme
</button>

و JavaScript می‌تواند کلاس dark را روی html اضافه یا حذف کند.

در این دوره فعلاً روی Tailwind CSS تمرکز داریم و پیاده‌سازی کامل JavaScript این قابلیت خارج از هدف این مقاله است.

سفارشی‌سازی Tailwind CSS

Tailwind CSS مجموعه بزرگی از Utilityها و مقادیر آماده در اختیار ما قرار می‌دهد.

اما در پروژه‌های واقعی معمولاً یک Design System مشخص داریم.

برای مثال ممکن است رنگ اصلی برند ما:

Primary
#ff6b00

باشد.

یا بخواهیم یک Container با اندازه خاص داشته باشیم.

در چنین شرایطی می‌توان Tailwind را سفارشی کرد.

چرا Tailwind را سفارشی کنیم؟

فرض کنید پروژه شما رنگ‌های زیر را دارد:

Primary
Secondary
Success
Danger

اگر هر بار رنگ را به صورت مقدار دلخواه یا CSS جداگانه بنویسید، مدیریت پروژه دشوارتر می‌شود.

بهتر است رنگ‌های پروژه را در Theme تعریف کنید و سپس از Utilityهای مشخص استفاده کنید.

تعریف رنگ اختصاصی

در Tailwind CSS جدید می‌توان Theme Tokenها را در CSS تعریف کرد.

مثلاً:

@import "tailwindcss";

@theme {
    --color-brand: #ff6b00;
    --color-brand-dark: #d95700;
}

حالا می‌توانیم از این رنگ‌ها استفاده کنیم:

<button class="bg-brand text-white hover:bg-brand-dark">
    خرید محصول
</button>

این روش باعث می‌شود رنگ برند در کل پروژه قابل استفاده باشد.

تعریف چند رنگ پروژه

مثلاً:

@theme {

    --color-brand: #ff6b00;
    --color-brand-dark: #d95700;

    --color-success: #16a34a;
    --color-danger: #dc2626;

}

حالا می‌توانیم:

<button class="bg-brand text-white">
    Primary Button
</button>

یا:

<span class="bg-success text-white">
    Success
</span>

استفاده کنیم.

سفارشی‌سازی Font

در طراحی فارسی، انتخاب Font مناسب اهمیت زیادی دارد.

می‌توانیم Font پروژه را نیز در Theme تعریف کنیم.

مثال:

@import "tailwindcss";

@theme {
    --font-sans: "Vazirmatn", sans-serif;
}

سپس:

<body class="font-sans">

می‌تواند Font تعریف‌شده را استفاده کند.

البته خود فایل Font نیز باید در پروژه قرار داشته باشد یا از روش مناسب دیگری بارگذاری شود.

سفارشی‌سازی Container

Tailwind Utilityهای مختلفی برای کنترل عرض محتوا دارد.

مثلاً:

<div class="mx-auto max-w-7xl px-6">
    Content
</div>

در بسیاری از پروژه‌ها همین Utilityها کافی هستند.

اما اگر Design System خاصی داشته باشیم، می‌توان مقادیر Theme را متناسب با نیاز پروژه تنظیم کرد.

استفاده از CSS Variableها

یکی از مفاهیم مهم در سفارشی‌سازی Tailwind، CSS Custom Properties یا همان CSS Variableها هستند.

مثلاً:

:root {
    --brand-color: #ff6b00;
}

و سپس:

background-color: var(--brand-color);

در Tailwind جدید، Theme نیز بر پایه Variableها قابل تعریف است.

این موضوع باعث می‌شود Design System پروژه ساختارمندتر شود.

ساخت Design System ساده

فرض کنید برای پروژه خود این قوانین را داریم:

Brand Color
Orange

Text
Dark Gray

Background
White

Dark Background
Dark Gray

Border Radius
Rounded

Font
Sans

می‌توانیم Utilityهای Tailwind را بر اساس این Design System استفاده کنیم.

مثلاً:

<div class="rounded-xl bg-white p-6 text-gray-900 shadow-sm
            dark:bg-gray-800 dark:text-white">
    
    <h2 class="text-xl font-bold">
        Product
    </h2>

    <p class="mt-2 text-gray-600 dark:text-gray-300">
        Product description.
    </p>

    <button class="mt-5 rounded-lg bg-brand px-5 py-3 text-white">
        خرید
    </button>

</div>

Dark Mode و Transition

می‌توانیم تغییر Theme را نرم کنیم:

<div
    class="bg-white text-gray-900
           transition-colors duration-300
           dark:bg-gray-900
           dark:text-white"
>
    Content
</div>

در نتیجه تغییر رنگ‌ها می‌تواند به شکل نرم‌تری انجام شود.

Dark Mode در یک Card کامل

<div
    class="group rounded-2xl border border-gray-200
           bg-white p-6 text-gray-900 shadow-sm
           transition-all duration-300
           hover:-translate-y-1 hover:shadow-lg

           dark:border-gray-700
           dark:bg-gray-800
           dark:text-white"
>

    <h3
        class="text-xl font-bold
               transition-colors
               group-hover:text-blue-600
               dark:group-hover:text-blue-400"
    >
        Modern Product
    </h3>

    <p class="mt-3 text-gray-600 dark:text-gray-300">
        A product description.
    </p>

    <button
        class="mt-5 rounded-lg bg-blue-600 px-5 py-2
               text-white
               transition-colors
               hover:bg-blue-700
               dark:bg-blue-500
               dark:hover:bg-blue-600"
    >
        خرید
    </button>

</div>

این مثال چند مفهوم را با هم ترکیب می‌کند:

Dark Mode
+
Hover
+
Group
+
Transition
+
Shadow
+
Typography
+
Spacing

چه چیزهایی را سفارشی کنیم؟

در یک پروژه واقعی معمولاً این موارد ارزش سفارشی‌سازی دارند:

  • رنگ‌های برند

  • رنگ‌های وضعیت

  • Font

  • Breakpointهای خاص

  • اندازه‌های موردنیاز Design System

  • Shadowهای اختصاصی

  • Radiusهای اختصاصی

  • Spacingهای خاص

اما بهتر است هر چیزی را صرفاً برای سفارشی‌سازی تغییر ندهیم.

اگر Utilityهای پیش‌فرض Tailwind نیاز پروژه را برطرف می‌کنند، استفاده از همان Utilityها معمولاً ساده‌تر است.

چه زمانی از CSS معمولی استفاده کنیم؟

Tailwind CSS قرار نیست تمام CSS را حذف کند.

گاهی ممکن است یک ویژگی بسیار خاص داشته باشیم که بهتر باشد با CSS سفارشی پیاده‌سازی شود.

برای مثال:

.custom-element {
    ...
}

اما در بیشتر Layoutهای معمول می‌توان از Utilityهای Tailwind استفاده کرد.

هدف این است که ابزار مناسب را برای مسئله مناسب انتخاب کنیم.

اشتباهات رایج در Dark Mode

۱. فقط تغییر Background

این کافی نیست.

باید مواردی مانند:

Text
Border
Card
Input
Button
Shadow

نیز بررسی شوند.

۲. استفاده از رنگ‌های بسیار روشن

Background تیره با متن سفید بسیار شدید ممکن است خوانایی مناسبی نداشته باشد.

برای متن‌های فرعی می‌توان از رنگ‌های خاکستری روشن‌تر استفاده کرد.

۳. فراموش کردن تصاویر

برخی تصاویر یا Logoها ممکن است در Dark Mode ظاهر مناسبی نداشته باشند.

۴. استفاده بیش از حد از Dark Variant

لازم نیست برای هر Utility یک dark: تعریف کنیم.

فقط بخش‌هایی را که واقعاً در Theme تاریک نیاز به تغییر دارند، تنظیم کنید.

تمرین عملی

یک صفحه فروشگاهی با Dark Mode بسازید.

صفحه باید شامل موارد زیر باشد:

Header

Logo
Navigation
Theme Button

Hero

Title
Description
Button

Product Cards

حداقل سه Card ایجاد کنید.

در Light Mode:

White Background
Dark Text
Light Border

در Dark Mode:

Dark Background
Light Text
Dark Border

Input

یک Search Input بسازید که در هر دو Theme ظاهر مناسبی داشته باشد.

Footer

Footer نیز باید Dark Mode را پشتیبانی کند.

در نهایت این Utilityها را حداقل یک بار استفاده کنید:

dark:
transition-colors
hover:
focus:
group-hover:

جمع‌بندی

در این مقاله با یکی از قابلیت‌های مهم Tailwind CSS یعنی Dark Mode آشنا شدیم.

یاد گرفتیم:

  • Dark Mode چیست.

  • چگونه از dark: استفاده کنیم.

  • چگونه رنگ Background را تغییر دهیم.

  • چگونه Text و Border را برای Dark Mode تنظیم کنیم.

  • چگونه Card، Button و Input را برای Theme تاریک آماده کنیم.

  • چگونه Dark Mode را با Hover و Transition ترکیب کنیم.

  • مفهوم کلی Theme و Design System را درک کنیم.

  • چگونه رنگ‌های اختصاصی پروژه را تعریف کنیم.

  • چگونه Font و برخی تنظیمات طراحی را سفارشی کنیم.

  • چه زمانی از Utilityهای آماده و چه زمانی از CSS سفارشی استفاده کنیم.

ساختار کلی یک عنصر با دو Theme می‌تواند چنین باشد:

<div
    class="bg-white text-gray-900
           dark:bg-gray-900 dark:text-white"
>
    Content
</div>

و با ترکیب آن با Stateها و Transitionها می‌توانیم رابط کاربری کامل‌تری بسازیم:

Responsive
    +
States
    +
Transition
    +
Dark Mode
    +
Custom Theme
    =
Modern UI

۰۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.