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

مقالات

مشاهده مقاله
مشاهده تمامی مقالات
پربازدیدترین مقالات
خلاصه مقاله:‌

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

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

فهرست مطالب

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

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

متن مقاله:‌

اگر قصد دارید حالت 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` به عناصر ممکن می‌سازد.

<script>
    tailwind.config = {
        darkMode: 'class',
    }
</script>    

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

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com">
    </script>
    <script src=
"https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp">
    </script>
</head>
<script>
    tailwind.config = {
        darkMode: 'class',
    }
</script>
<style>
    body {
        color: #fff;
        height: 800px;
    }

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

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

</html>

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

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

onclick="document.body.classList.toggle('dark-mode')"

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

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com">
    </script>
    <script src=
"https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp">
    </script>
</head>

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

<body class="dark-mode">
    <div class="justify-center grid items-center h-screen">
        <div class="bg-dark-mode-white">
            <p class="text-dark-mode-black">GeeksForGeeks</p>

            <button class="border p-2" 
                    onclick="document.body.classList.toggle('dark-mode')">
                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 فعال کنیم؟` آشنا شدید. امیدوارم که این مقاله برای شما مفید بوده باشد. اگر هر سوال/مشکلی در خصوص این مقاله داشتید حتما در قسمت نطرات سایت با ما در میان بگذارید.

 

منبع: geeksforgeeks 

برای ارسال نظر ابتدا باید وارد حساب خود شوید.
تاکنون نظری ثبت نشده است.
برنامه‌نویسی
0
0
زمان مطالعه:6دقیقه
اطلاعات مقاله
نویسنده:علیرضا تحریری
تگ‌ها: #حالت تاریک #Dark Mode #Tailwind CSS #چطوری حالت Dark Mode را در Tailwind CSS فعال کنیم؟ #چطوری حالت تاریک (Dark Mode) را در Tailwind CSS فعال کنیم؟ #فعال کردن Dark Mode #فعال کردن حالت تاریک #اضافه کردن Dark Mode #حالت تاریک در Tailwind #حالت تاریک در Tailwind CSS #آموزش Tailwind CSS #آموزش فعالسازی Dark Mode در Tailwind #آموزش فعالسازی Dark Mode
زبان:فارسی
دسترسی:عمومی
تاریخ انتشار:شنبه، 17 آذر 1403
تاریخ بروزرسانی:شنبه، 17 آذر 1403
لینک کوتاه: https://mimoc.ir/a/10051

سایر مقالات

مقالات پیشنهادی
مشاهده تمامی مقالات