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

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

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

دارک مود دیگه فقط یه ترند نیست، یه ضرورت برای تجربه کاربری بهتره. الان دیگه اکثر سیستم‌عامل‌ها، از ویندوز و مک گرفته تا اندروید و 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)