آموزش پیاده‌سازی Dark Mode در سایت با کمترین خط کد

نقشه راه سریع: پیاده‌سازی دارک مود در یک نگاه

۱. CSS اولیه

با prefers-color-scheme ظاهر اولیه را تنظیم کن.

۲. سوئیچ دارک مود

یک دکمه یا توگل برای تغییر دستی (HTML, CSS).

۳. جاوااسکریپت

منطق تغییر کلاس‌ها و ذخیره تنظیمات (Local Storage).

۴. بهینه‌سازی

متغیرهای CSS، انیمیشن‌ها، تصاویر و عیب‌یابی.

آماده‌ای؟ بزن بریم تا سایتت رو چشم‌نوازتر کنیم!

رفیق برنامه‌نویس، حالت چطوره؟ امروز می‌خوام یه قابلیت خفن و بسیار پرطرفدارد رو با هم به سایتت اضافه کنیم که هم کاربرا حال کنن، هم سایتت حرفه‌ای‌تر به نظر برسه: دارک مود! فکر کردی کار سختیه و کلی کد می‌خواد؟ نه اصلا! امروز بهت نشون می‌دم چطور با کمترین خط کد، یه دارک مود تمام‌عیار و کاربردی برای سایتت پیاده‌سازی کنی. این آموزش به درد هر وب‌مستری می‌خوره، از اونایی که تازه شروع کردن تا اونایی که دنبال یه راه حل تمیز و بهینه می‌گردن. اگه برای ابزارهای مورد نیازت برای این کار یا سایر پروژه‌هات به دنبال گزینه‌های باکیفیت و حرفه‌ای هستی، حتماً یه سر به فروشگاه ابزارهای ما بزن و بهترین‌ها رو برای خودت پیدا کن!

چرا دارک مود انقدر مهمه؟

دارک مود دیگه فقط یه ترند نیست، یه ضرورت برای تجربه کاربری بهتره. الان دیگه اکثر سیستم‌عامل‌ها، از ویندوز و مک گرفته تا اندروید و iOS، قابلیت دارک مود رو دارن و کاربرا انتظار دارن وب‌سایت‌ها هم با این تنظیمات هماهنگ باشن. اما چرا انقدر محبوب شده؟

• کاهش خستگی چشم: به خصوص تو محیط‌های کم‌نور، تیره بودن پس‌زمینه فشار کمتری به چشم میاره. تصور کن ساعت ۲ نصف شب داری کد می‌زنی یا یه مقاله طولانی می‌خونی، قطعاً دارک مود رفیق شفیقت میشه.
• صرفه‌جویی در مصرف باتری: تو دستگاه‌هایی که صفحه نمایش OLED دارن (مثل اکثر گوشی‌های هوشمند جدید)، نمایش رنگ مشکی به معنای خاموش بودن اون پیکسل‌هاست. این یعنی مصرف کمتر باتری، که خبر خوبیه واسه همه ما!
• زیبایی و مدرنیته: راستش رو بخوای، دارک مود خیلی شیک و مدرن به نظر می‌رسه. یه حس حرفه‌ای بودن به سایتت می‌ده و باعث میشه از رقبای سنتی‌تر یه پله جلوتر باشی.
• تطابق با ترجیحات کاربر: هر کسی یه سلیقه‌ای داره و با دارک مود، به کاربر این امکان رو می‌دی که سایتت رو مطابق میل خودش شخصی‌سازی کنه. این یعنی افزایش رضایت و ماندگاری کاربر.

شروع کار با CSS: جادو با prefers-color-scheme

اولین و ساده‌ترین قدم برای پیاده‌سازی دارک مود، استفاده از Media Queryی prefers-color-scheme تو CSS هستش. این قابلیت به مرورگر اجازه می‌ده بفهمه کاربر توی سیستم‌عامل خودش چه تمی رو انتخاب کرده (لایت یا دارک) و بر اساس اون، استایل‌های متفاوتی رو اعمال کنه. یعنی دارک مود سایتت به صورت خودکار با تنظیمات سیستم کاربر همگام میشه.

گام ۱: استایل‌های پایه

اول از همه، استایل‌های پایه (لایت مود) رو تعریف می‌کنیم. اینا همون استایل‌هایی هستن که سایتت به طور پیش‌فرض داره:

body {
    background-color: #FFFFFF; /* پس‌زمینه روشن */
    color: #333333; /* متن تیره */
}

a {
    color: #007BFF; /* لینک آبی */
}

.card {
    background-color: #F8F9FA;
    border: 1px solid #E0E0E0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

گام ۲: استایل‌های دارک مود با Media Query

حالا با استفاده از @media (prefers-color-scheme: dark)، استایل‌های دارک مود رو تعریف می‌کنیم. مرورگر هر وقت تشخیص بده کاربر دارک مود رو فعال کرده، این استایل‌ها رو جایگزین استایل‌های قبلی می‌کنه:

@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212; /* پس‌زمینه تیره */
        color: #E0E0E0; /* متن روشن */
    }

    a {
        color: #90CAF9; /* لینک آبی روشن‌تر */
    }

    .card {
        background-color: #1E1E1E;
        border: 1px solid #333333;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
}

به همین راحتی! با همین چند خط کد، سایتت به صورت خودکار به تنظیمات سیستم کاربر واکنش نشون می‌ده. اگه می‌خوای کدهای آماده و اسنیپت‌های بیشتری برای پروژه‌هات داشته باشی، حتماً به بخش کدهای آماده و اسنیپت سر بزن.

اضافه کردن دکمه تغییر دستی: حق انتخاب با کاربر

خب، Media Query خیلی خوبه، ولی بعضی کاربرا دوست دارن خودشون هر وقت خواستن، تم سایت رو عوض کنن، بدون اینکه به تنظیمات سیستم دست بزنن. اینجاست که یه دکمه یا سوئیچ دارک مود به کار میاد.

گام ۱: ساختار HTML برای سوئیچ

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

<button id="darkModeToggle">تغییر به دارک مود</button>

این دکمه رو می‌تونی هر جایی از سایتت که مناسب می‌دونی، مثلاً توی هدر یا فوتر، قرار بدی.

گام ۲: استایل‌بندی CSS برای سوئیچ و حالت دارک مود

برای اینکه بتونیم با جاوااسکریپت تم رو عوض کنیم، باید یه کلاس CSS به body اضافه کنیم. مثلاً کلاس dark-mode.

/* استایل‌های دارک مود با کلاس */
body.dark-mode {
    background-color: #121212;
    color: #E0E0E0;
}

body.dark-mode a {
    color: #90CAF9;
}

body.dark-mode .card {
    background-color: #1E1E1E;
    border: 1px solid #333333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* استایل‌بندی دکمه دارک مود */
#darkModeToggle {
    background-color: #3498DB;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin: 20px;
    transition: background-color 0.3s ease;
}

#darkModeToggle:hover {
    background-color: #2980B9;
}

گام ۳: جاوااسکریپت برای تغییر تم و ذخیره تنظیمات

اینجا بخش هیجان‌انگیزه! با چند خط جاوااسکریپت، هم دکمه رو فعال می‌کنیم و هم تنظیمات کاربر رو تو مرورگرش ذخیره می‌کنیم تا وقتی دوباره به سایتت سر زد، تم مورد علاقه‌اش یادش باشه.

<script>
    const toggleButton = document.getElementById('darkModeToggle');
    const body = document.body;

    // تابع برای اعمال تم
    function applyTheme(theme) {
        if (theme === 'dark') {
            body.classList.add('dark-mode');
            toggleButton.textContent = 'تغییر به لایت مود';
        } else {
            body.classList.remove('dark-mode');
            toggleButton.textContent = 'تغییر به دارک مود';
        }
    }

    // بررسی تنظیمات ذخیره‌شده یا ترجیحات سیستم در بارگذاری صفحه
    document.addEventListener('DOMContentLoaded', () => {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
            applyTheme(savedTheme);
        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            // اگه چیزی ذخیره نشده، بر اساس تنظیمات سیستم عمل کن
            applyTheme('dark');
        } else {
            applyTheme('light'); // پیش‌فرض لایت مود
        }
    });

    // اضافه کردن رویداد کلیک به دکمه
    toggleButton.addEventListener('click', () => {
        if (body.classList.contains('dark-mode')) {
            applyTheme('light');
            localStorage.setItem('theme', 'light');
        } else {
            applyTheme('dark');
            localStorage.setItem('theme', 'dark');
        }
    });

    // شنونده برای تغییر prefers-color-scheme در حین مرور (فقط در صورتی که کاربر دستی تغییر نداده باشد)
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
        if (!localStorage.getItem('theme')) { // فقط اگه کاربر دستی تم رو انتخاب نکرده باشه
            applyTheme(event.matches ? 'dark' : 'light');
        }
    });
</script>

توضیح کوتاه کد بالا:

• applyTheme(theme): این تابع کلاس dark-mode رو به body اضافه یا از اون حذف می‌کنه و متن دکمه رو هم تغییر می‌ده.
• DOMContentLoaded: وقتی صفحه بارگذاری میشه، اول چک می‌کنه ببینه کاربر قبلاً تمی رو انتخاب و ذخیره کرده (با localStorage.getItem('theme')). اگه نکرده، بر اساس تنظیمات prefers-color-scheme سیستم کاربر تم رو اعمال می‌کنه.
• addEventListener('click'): هر وقت کاربر روی دکمه کلیک می‌کنه، تم رو عوض می‌کنه و تم جدید رو توی localStorage ذخیره می‌کنه.
• matchMedia('(prefers-color-scheme: dark)').addEventListener('change'): این قسمت باعث میشه اگه کاربر در طول بازدید از سایت، تم سیستم‌عاملش رو عوض کرد، سایت هم به صورت خودکار تغییر کنه، البته به شرطی که قبلاً خودش تمی رو به صورت دستی انتخاب و ذخیره نکرده باشه.

با این کدهای ساده، سایتت هم اتوماتیک با سیستم کاربر همگام میشه و هم یه دکمه برای تغییر دستی بهش اضافه کردی. دیگه چی از این بهتر؟

فراتر از پایه: ترفندهای پیشرفته برای دارک مود

حالا که پایه دارک مود رو محکم ریختی، بیا چند تا نکته حرفه‌ای‌تر رو هم بررسی کنیم که سایتت رو واقعاً خاص می‌کنه.

۱. استفاده از متغیرهای CSS (CSS Variables)

استفاده از متغیرهای CSS (که بهشون custom properties هم میگن) کار مدیریت رنگ‌ها رو تو دارک مود خیلی راحت می‌کنه. به جای اینکه برای هر عنصری رنگ رو جداگانه تعریف کنی، می‌تونی متغیر تعریف کنی و فقط اون متغیرها رو تغییر بدی.

:root {
    --bg-color: #FFFFFF;
    --text-color: #333333;
    --link-color: #007BFF;
    --card-bg: #F8F9FA;
    --card-border: #E0E0E0;
    --card-shadow: rgba(0,0,0,0.1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #E0E0E0;
        --link-color: #90CAF9;
        --card-bg: #1E1E1E;
        --card-border: #333333;
        --card-shadow: rgba(0,0,0,0.3);
    }
}

body.dark-mode { /* برای تغییر دستی */
    --bg-color: #121212;
    --text-color: #E0E0E0;
    --link-color: #90CAF9;
    --card-bg: #1E1E1E;
    --card-border: #333333;
    --card-shadow: rgba(0,0,0,0.3);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease; /* انیمیشن برای تغییر */
}

a {
    color: var(--link-color);
    transition: color 0.3s ease;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 2px 5px var(--card-shadow);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

۲. انیمیشن و Transition‌های نرم

تغییر ناگهانی از لایت به دارک یا برعکس، ممکنه چشم رو اذیت کنه. با استفاده از transition تو CSS، می‌تونی این تغییرات رو نرم و دلنشین کنی. دیدی توی کد بالا، به body و a و .card یه transition اضافه کردم؟ اون باعث میشه تغییر رنگ‌ها با یه انیمیشن ملایم اتفاق بیفته.

۳. مدیریت تصاویر و SVGها

بعضی از تصاویر یا آیکون‌های SVG ممکنه تو دارک مود خیلی خوب به نظر نرسن. مثلاً یه لوگوی تیره روی پس‌زمینه دارک مود ممکنه ناپدید بشه.

* برای تصاویر (PNG, JPG): می‌تونی دو نسخه از تصویر رو داشته باشی (یکی برای لایت و یکی برای دارک) و با جاوااسکریپت یا CSS اونا رو عوض کنی. ساده‌ترین راه استفاده از تگ <picture> هست:

<picture>
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
  <img src="logo-light.png" alt="My Logo">
</picture>

یا اگه از کلاس dark-mode استفاده می‌کنی:

/* CSS */
.logo-light { display: block; }
.logo-dark { display: none; }

body.dark-mode .logo-light { display: none; }
body.dark-mode .logo-dark { display: block; }

/* HTML */
<img src="logo-light.png" alt="Light Mode Logo" class="logo-light">
<img src="logo-dark.png" alt="Dark Mode Logo" class="logo-dark">

* برای SVGها: اگه SVG رو به صورت اینلاین (Inline) تو HTML قرار دادی، می‌تونی با CSS رنگ fill و stroke اون رو تغییر بدی. این بهترین و انعطاف‌پذیرترین راهه.

/* CSS */
.icon {
    fill: #333333; /* رنگ پیش‌فرض */
}

body.dark-mode .icon {
    fill: #E0E0E0; /* رنگ برای دارک مود */
}

/* HTML */
<svg class="icon" width="24" height="24" viewBox="0 0 24 24">
    <path d="..."/>
</svg>

مدیریت فونت و تایپوگرافی در دارک مود

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

• کنتراست مناسب: مطمئن شو که کنتراست بین متن و پس‌زمینه به اندازه کافی زیاده. ابزارهای آنلاین زیادی هستن که کنتراست رنگ‌ها رو بررسی می‌کنن. رنگ سفید خالص روی مشکی خالص هم ممکنه چشم رو اذیت کنه؛ بهتره از طیف خاکستری روشن (مثل #E0E0E0) برای متن و خاکستری تیره (مثل #121212) برای پس‌زمینه استفاده کنی.
• ضخامت فونت: گاهی اوقات بهتره تو دارک مود از فونت‌های کمی ضخیم‌تر (boldتر) یا با وزن (font-weight) بیشتر استفاده کنی تا خوانایی حفظ بشه. مثلاً اگه تو لایت مود font-weight: 300 داری، تو دارک مود از font-weight: 400 استفاده کن.
• فاصله خطوط: افزایش جزئی line-height می‌تونه به بهبود خوانایی متون طولانی تو دارک مود کمک کنه.

عیب‌یابی سریع: مشکلات رایج و راه‌حل‌ها

ممکنه حین پیاده‌سازی دارک مود به یه سری مشکلات بربخوری. اینجا چند تا از رایج‌ترینشون رو با راه‌حل‌هاشون آوردم:

نکات مهم برای یک تجربه کاربری بی‌نقص (UX)

یک دارک مود خوب فقط تغییر رنگ‌ها نیست؛ باید تجربه کاربری رو هم بهبود بده.

• تست روی دستگاه‌های مختلف: حتماً سایتت رو تو دارک مود روی موبایل، تبلت، لپ‌تاپ و حتی اگه دسترسی داری، روی یه تلویزیون هوشمند تست کن. ممکنه رنگ‌ها و کنتراست تو صفحات نمایش مختلف، فرق داشته باشن. اینطوری مطمئن می‌شی که رسپانسیو بودن دارک مودت تمام و کمال رعایت شده.
• کنتراست کافی: هیچوقت کنتراست رو فدای زیبایی نکن. متن باید همیشه خوانا باشه. استانداردای WCAG 2.1 رو برای کنتراست رنگ‌ها در نظر بگیر.
• ثبات بصری: مطمئن شو تمام المان‌های سایت (دکمه‌ها، فرم‌ها، منوها، پاپ‌آپ‌ها) تو دارک مود هم ظاهر مناسبی دارن و چیزی از قلم نیفتاده.
• فلاشینگ (Flash of unstyled content / FOUC): گاهی اوقات ممکنه برای یک لحظه، سایت تو حالت لایت لود بشه و بعد به دارک مود بپره. برای جلوگیری از این مشکل، کد جاوااسکریپت رو تا حد امکان زودتر در <head> قرار بده یا از CSS متغیر و کلاس dark-mode استفاده کن که توی <body> لود میشه و جاوااسکریپت فقط اون رو فعال می‌کنه.

سخن پایانی

خب رفیق، دیدی که پیاده‌سازی دارک مود در سایت با کمترین خط کد، نه تنها پیچیده نیست، بلکه می‌تونه کلی ارزش به سایتت اضافه کنه. با استفاده از prefers-color-scheme و یه مقدار جاوااسکریپت ساده، می‌تونی یه تجربه کاربری عالی برای مخاطبانت فراهم کنی. همین الان دست به کار شو و سایتت رو به یه محیط جذاب و چشم‌نواز تو هر دو حالت لایت و دارک تبدیل کن. اگه سوالی داری یا جایی به مشکل برخوردی، نگران نباش! می‌تونی همین الان با تیم پشتیبانی ما تماس بگیری تا راهنماییت کنیم یا به صفحه تماس با تیم فنی سر بزنی. یادت باشه، ما همیشه اینجاییم تا بهت کمک کنیم سایتت رو به بهترین نسخه خودش برسونی. برای اطلاعات بیشتر و مقالات آموزشی جذاب، به صفحه اصلی سایت ما سر بزن!

سوالات متداول (FAQ)

آموزش پیاده‌سازی Dark Mode در سایت با کمترین خط کد

حالت تاریک یا همان Dark Mode دیگر یک ویژگی فانتزی و لوکس برای وب‌سایت‌ها نیست؛ بلکه یک استاندارد ضروری برای تجربه کاربری (UX) مدرن است. کاربران امروزی عادت کرده‌اند در محیط‌های کم‌نور، قالب سایت‌ها را به تاریک تغییر دهند تا چشمانشان کمتر خسته شود. اما چطور می‌توانیم این قابلیت جذاب را بدون درگیر شدن با کتابخنه های سنگین و کدهای پیچیده، به ساده‌ترین و بهینه‌ترین شکل ممکن روی سایت خود پیاده کنیم؟

در این مقاله کاملاً کاربردی و علمی، یاد می‌گیرید که چطور با کمترین خط کد ممکن در CSS و JavaScript، یک حالت تاریک فوق‌العاده سریع، هوشمند و سازگار با سلیقه سیستم‌عامل کاربر طراحی کنید که مستقیماً روی سئوی فنی و رضایت مخاطبان شما تاثیر مثبت بگذارد.

فهرست مطالب

• سریع‌ترین راه فعال‌سازی دارک مود چیست؟ (پاسخ سریع)
• چرا باید از کمترین خط کد برای دارک مود استفاده کنیم؟
• روش اول: پیاده‌سازی دارک مود در ۱ خط کد (ترفند فیلتر رنگ)
• روش دوم: پیاده‌سازی استاندارد و حرفه‌ای با متغیرهای CSS
• افزودن دکمه سوئیچ و ذخیره‌سازی در LocalStorage با جاوا اسکریپت
• راهنمای پیاده‌سازی در وردپرس و سیستم‌های مدیریت محتوا
• جدول مقایسه روش‌های پیاده‌سازی دارک مود
• عیب‌یابی سریع و رفع مشکلات رایج
• سوالات متداول کاربران (FAQ)

چرا باید از کمترین خط کد برای دارک مود استفاده کنیم؟

هر خط کد اضافه‌ای که به وب‌سایت خود تزریق می‌کنید، می‌تواند بر سرعت بارگذاری صفحه، رتبه سئو و تجربه کاربر در موبایل اثر بگذارد. استفاده از کتابخانه‌های آماده برای دارک مود، معمولاً ده‌ها کیلوبایت کد استایل و جاوا اسکریپت اضافی به مرورگر تحمیل می‌کند.

با استفاده از ویژگی‌های مدرن CSS مانند متغیرها و کدهای بومی جاوا اسکریپت، می‌توانیم بدون افت فریم و بدون نیاز به دانلود فایل‌های حجیم جانبی، حالتی فوق‌العاده روان و سریع خلق کنیم. اگر به دنبال توسعه دانش فنی خود در زمینه کدهای بهینه هستید، بررسی بخش قطعه کدهای آماده می‌تواند دیدگاه‌های خلاقانه‌تری به شما ارائه دهد.

روش اول: پیاده‌سازی دارک مود در ۱ خط کد (ترفند فیلتر رنگ)

اگر به دنبال یک راهکار فوق‌العاده سریع و موقت هستید، یک ترفند جالب در CSS وجود دارد که کل رنگ‌های سایت شما را برعکس (Invert) می‌کند. با این ترفند، رنگ‌های روشن به تیره و تیره به روشن تبدیل می‌شوند.

html {
    filter: invert(1) hue-rotate(180deg);
}

این روش چطور کار می‌کند؟

خاصیت invert(1) تمام رنگ‌های صفحه را ۱۰۰ درصد معکوس می‌کند. از آنجا که این کار ممکن است رنگ تصاویر و ویدیوها را خراب و شبیه به فیلم‌های رادیولوژی کند، بخش hue-rotate(180deg) به کمک ما می‌آید تا با چرخش ۱۸۰ درجه‌ای فام رنگ‌ها، تا حدودی طبیعی بودن آن‌ها را حفظ کند.

با اینکه این روش بسیار سریع است، اما برای پروژه‌های تجاری توصیه نمی‌شود زیرا کنترل دقیقی روی رنگ المان‌ها به شما نمی‌دهد. برای یادگیری کدهای پایه‌ای‌تر، می‌توانید مقالات حوزه آموزش و ترفندهای HTML را مطالعه کنید.

روش دوم: پیاده‌سازی استاندارد و حرفه‌ای با متغیرهای CSS

بهترین راه برای ایجاد یک پوسته تیره اصولی، استفاده از متغیرهای CSS است. در این روش، ما رنگ قطعات مختلف وب‌سایت را به صورت متغیر تعریف می‌کنیم و در حالت تاریک، مقدار این متغیرها را تغییر می‌دهیم.

گام اول: تعریف متغیرها در CSS

ابتدا متغیرهای رنگی را در ریشه سند (:root) تعریف می‌کنیم. سپس مشخص می‌کنیم که اگر کلاس dark-mode به تگ body یا html اضافه شد، مقادیر این متغیرها تغییر کنند. نمونه کدهای زیر را می‌توانید در فایل استایل خود قرار دهید. برای دسترسی به کدهای بیشتر می‌توانید به بخش قطعه کدهای CSS مراجعه کنید.

/* حالت پیش‌فرض (پوسته روشن) */
:root {
    --bg-color: #ffffff;
    --text-color: #1e293b;
    --link-color: #2563eb;
}

/* حالت تاریک */
body.dark-mode {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --link-color: #38bdf8;
}

/* اعمال متغیرها روی عناصر سایت */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    color: var(--link-color);
}

گام دوم: همگام‌سازی با تنظیمات سیستم‌عامل کاربر

بسیاری از کاربران ترجیح می‌دهند سایت شما به طور خودکار با تنظیمات گوشی یا لپ‌تاپ آن‌ها ست شود. با استفاده از مدیا کوئری prefers-color-scheme در CSS، می‌توان این کار را بدون حتی یک خط جاوا اسکریپت انجام داد:

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #0f172a;
        --text-color: #f8fafc;
        --link-color: #38bdf8;
    }
}

افزودن دکمه سوئیچ و ذخیره‌سازی در LocalStorage با جاوا اسکریپت

سیستم تشخیص خودکار عالی است، اما کاربران باید کنترل نهایی را در دست داشته باشند. برای این کار به یک دکمه ساده روی سایت و چند خط کد جاوا اسکریپت نیاز داریم تا انتخاب کاربر را در حافظه مرورگر (LocalStorage) ذخیره کند تا با رفرش شدن صفحه، قالب سایت به حالت قبلی بازنگردد.

برای یادگیری عمیق‌تر مفاهیم اسکریپت‌نویسی وب، حتما سری به بخش قطعه کدهای جاوا اسکریپت بزنید.

کد HTML دکمه سوئیچ:

<button id="theme-toggle" style="padding: 10px 15px; cursor: pointer;">تغییر حالت پوسته</button>

کد جاوا اسکریپت بهینه و سبک:

const toggleBtn = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme');

// بررسی وضعیت ذخیره شده قبلی
if (currentTheme === 'dark') {
    document.body.classList.add('dark-mode');
}

// شنونده کلیک دکمه
toggleBtn.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    
    // ذخیره وضعیت جدید در حافظه مرورگر
    let theme = 'light';
    if (document.body.classList.contains('dark-mode')) {
        theme = 'dark';
    }
    localStorage.setItem('theme', theme);
});

راهنمای پیاده‌سازی در وردپرس و سیستم‌های مدیریت محتوا

اگر از وردپرس استفاده می‌کنید، نیازی به نصب افزونه‌های سنگین که سرعت لود سایت را به شدت کاهش می‌دهند ندارید. شما به راحتی می‌توانید کدهای بالا را به قالب خود اضافه کنید. برای این کار کافیست کدهای CSS را در بخش “سفارشی‌سازی > CSS اضافی” قرار داده و کدهای جاوا اسکریپت را از طریق فایل footer.php یا با استفاده از هوک‌های استاندارد ورپرس بارگذاری کنید.

برای دسترسی به آموزش‌های پیشرفته‌تر پیرامون مدیریت و بهینه‌سازی کدهای وردپرسی، دسته بندی قطعه کدهای وردپرس را از دست ندهید. همچنین توسعه‌دهندگانی که از پایتون در بک‌اند خود برای رندر صفحات یا مدیریت قالب‌ها استفاده می‌کنند، با مراجعه به صفحه قطعه کدهای پایتون می‌توانند ترفندهای جذابی برای ارتباط بک‌اند و فرانت‌اند پیدا کنند.

جدول مقایسه روش‌های پیاده‌سازی دارک مود

برای اینکه دید بهتری نسبت به روش‌های مختلف داشته باشید، جدول زیر مقایسه‌ای جامع بین دو متد اصلی ارائه می‌دهد:

عیب‌یابی سریع و رفع مشکلات رایج

هنگام پیاده‌سازی حالت تاریک ممکن است با چالش‌های فنی کوچکی مواجه شوید. در این بخش رایج‌ترین مشکلات را با راه‌حل‌های عملی آن‌ها مرور می‌کنیم:

۱. پرش صفحه در لحظه لود اول (Flickering)

مشکل: وقتی کاربر حالت تاریک را انتخاب کرده و صفحه را رفرش می‌کند، سایت برای یک لحظه کوتاه به صورت روشن نمایش داده شده و سپس تیره می‌شود که این موضوع به شدت چشم را آزار می‌دهد.

راه‌حل: قطعه کد جاوا اسکریپت مربوط به بررسی وضعیت LocalStorage را به جای انتهای بادی، در تگ <head> قرار دهید تا قبل از رندر شدن المان‌های HTML، کلاس تم تاریک به تگ بدنه اضافه شود.

۲. خیره‌کننده بودن تصاویر در تم تاریک

مشکل: تصاویر روشن و سفید وب‌سایت در حالت تاریک بیش از حد درخشان به نظر می‌رسند و باعث خستگی چشم می‌شوند.

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

body.dark-mode img {
    filter: brightness(.8) contrast(1.2);
}

سوالات متداول کاربران (FAQ)