خواندن ۳ دقیقه·۱۲ روز پیش

چطوری حالت تاریک (Dark Mode) را در Tailwind CSS فعال کنیم؟

اگر قصد دارید حالت Dark Mode را در وبسایت خود فعال کنید، Tailwind CSS امکانات داخلی قدرتمندی برای این کار ارائه میدهد. این ویژگی به برنامهنویسان اجازه میدهد نسخهای تاریک از قالب وبسایت خود را بهراحتی طراحی و پیادهسازی کنند. با تنظیم Dark Mode در فایل تنظیمات Tailwind و استفاده از کلاس dark، میتوانید استایلهای تاریک (dark) را بهآسانی و بدون مشکل برای بخشهای مختلف وبسایت خود اعمال کنید.

دو روش اصلی برای فعال کردن حالت تاریک در Tailwind CSS عبارتند از:

فهرست مطالب

پیکربندی حالت تاریک (dark mode) با استفاده از کلاس dark
فعالسازی حالت تاریک (dark mode) با استفاده از جاوااسکریپت

روش اول: استفاده از پیکربندی کلاس Dark

روش پیکربندی کلاس Dark در Tailwind CSS با افزودن تنظیم `darkMode: 'class'` به فایل کانفیگ، حالت تاریک (dark mode) را فعال میکند. این روش امکان اعمال استایلهای سفارشی برای حالت تاریک را با استفاده از پیشوند `dark:` فراهم کرده و تغییر تمها را از طریق اضافه کردن کلاس `dark` به عناصر ممکن میسازد.


    tailwind.config = {
        darkMode: 'class',
    }

مثال 1: در این مثال، از Tailwind CSS برای پیادهسازی حالت تاریک (dark mode) استفاده شده است. محتوای صفحه شامل یک عنوان و پاراگراف است که رنگ پسزمینه و متن آنها به صورت پویا بین تمهای روشن و تاریک تغییر میکند.

<!doctype html>
<html>

<head>
    <meta charset=&quotUTF-8&quot>
    <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>
    <script src=&quothttps://cdn.tailwindcss.com&quot>
    
    <script src=
&quothttps://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp&quot>
    
</head>

    tailwind.config = {
        darkMode: 'class',
    }

<style>
    body {
        color: #fff;
        height: 800px;
    }

    .bg-white {
        height: 100%;
    }
</style>

<body class=&quotdark&quot>
    <div class=&quotbg-white dark:bg-gray-900&quot>
        <h1 class=&quottext-gray-900 dark:text-white&quot>
            GeeksforGeeks</h1>
        <p class=&quottext-gray-600 dark:text-gray-300&quot>
            GeeksforGeeks is Computer Science Education Portal.
        </p>
        <p>GeeksforGeeks</p>
    </div>
</body>

</html>

روش دوم: استفاده از قابلیت سوئیچ بین حالتها با جاوااسکریپت

قابلیت سوئیچ با جاوااسکریپت، حالت تاریک را با سوئیچ کردن یک کلاس سفارشی (مثلاً .dark-mode) روی عناصر فعال میکند. توابع جاوااسکریپت بهصورت پویا این کلاس را اضافه یا حذف میکنند و به کاربران این امکان را میدهند که با کلیک کردن روی یک دکمه یا آیکون مشخص، بین حالت روشن (light) و تاریک (dark) سوئیچ کنند، مثال:

onclick=&quotdocument.body.classList.toggle('dark-mode')&quot

در این مثال، ما حالت تاریک (dark) را با استفاده از یک کلاس سفارشی .dark-mode که در بخش <style> تعریف شده است، سوئیچ میکنیم. کلیک کردن روی دکمه "Switch theme" باعث تغییر رنگ پسزمینه و متن در عنصر <body> به حالت تاریک میشود.

<!doctype html>
<html>

<head>
    <meta charset=&quotUTF-8&quot>
    <meta name=&quotviewport&quot 
          content=&quotwidth=device-width, 
                   initial-scale=1.0&quot>
    <script src=&quothttps://cdn.tailwindcss.com&quot>
    
    <script src=
&quothttps://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp&quot>
    
</head>

<style>
    .dark-mode {
        background-color: rgb(12, 12, 23);
        color: white;
    }
</style>

<body class=&quotdark-mode&quot>
    <div class=&quotjustify-center grid items-center h-screen&quot>
        <div class=&quotbg-dark-mode-white&quot>
            <p class=&quottext-dark-mode-black&quot>GeeksForGeeks</p>

            <button class=&quotborder p-2&quot 
                    =&quotdocument.body.classList.toggle('dark-mode')&quot>
                Switch theme
            </button>
        </div>
    </div>
</body>

</html>

فعالسازی حالت تاریک در Tailwind CSS – سوالات متداول

چگونه میتوانم رنگهای حالت تاریک را در Tailwind CSS سفارشیسازی کنم؟

مراحل افزودن رنگهای سفارشی برای تمهای حالت تاریک (dark mode) در فایل tailwind.config.js.

چرا حالت تاریک (dark mode) در پروژه Tailwind CSS من کار نمیکند؟

رفع مشکلات رایج مانند تنظیمات نادرست در فایل tailwind.config.js یا ناسازگاری نسخه CDN با حالت تاریک (dark mode).

در این مقاله با `چطوری حالت تاریک (Dark Mode) را در Tailwind CSS فعال کنیم؟` آشنا شدید. امیدوارم که این مقاله برای شما مفید بوده باشد. اگر هر سوال/مشکلی در خصوص این مقاله داشتید حتما در قسمت نطرات سایت با ما در میان بگذارید.

منبع: وبسایت میموک

dark modetailwindcssبرنامه نویسیcsshtml

علیرضا تحریری

سلام علیرضا تحریری هستم برنامه نویس بک اند که با فریم های Laravel،‌ Livewire، Lumen، Tailwind CSS، Alpine JS و ... کد مینویسم.

شاید از این پست‌ها خوشتان بیاید