יישום Dark Mode באתר שלך עם CSS Variables ו-JavaScript

מבוא

מצב כהה (Dark Mode) הפך לתכונה פופולרית מאוד באתרים ואפליקציות בשנים האחרונות. הוא לא רק מספק אפשרות עיצובית נוספת, אלא גם יכול לשפר את חווית המשתמש, להפחית עייפות עיניים בתאורה חלשה, ולחסוך באנרגיה במכשירים עם מסכי OLED. במדריך זה, נלמד כיצד ליישם Dark Mode באתר שלך באמצעות CSS Variables ו-JavaScript.

שלב 1: הגדרת CSS Variables

נתחיל בהגדרת משתני CSS (CSS Variables) שישמשו אותנו לשליטה בצבעים באתר:

:root {
    /* ערכי ברירת מחדל למצב בהיר */
    --background-color: #ffffff;
    --text-color: #333333;
    --link-color: #0000ff;
    --heading-color: #222222;
    --border-color: #dddddd;
    --button-bg: #f0f0f0;
    --button-text: #333333;
}

/* הגדרות למצב כהה */
[data-theme="dark"] {
    --background-color: #222222;
    --text-color: #f0f0f0;
    --link-color: #bb86fc;
    --heading-color: #ffffff;
    --border-color: #444444;
    --button-bg: #bb86fc;
    --button-text: #ffffff;
}

/* יישום המשתנים */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}

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

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
}

.border {
    border-color: var(--border-color);
}

button {
    background-color: var(--button-bg);
    color: var(--button-text);
}

בקוד זה, הגדרנו משתני CSS עבור הצבעים השונים באתר. השתמשנו ב-:root כדי להגדיר את ערכי ברירת המחדל למצב הבהיר, ויצרנו סלקטור [data-theme="dark"] שיחול כאשר נפעיל את המצב הכהה.

שלב 2: יצירת כפתור למעבר בין מצבים

כעת נוסיף כפתור HTML שיאפשר למשתמשים לעבור בין המצב הבהיר למצב הכהה:

<button id="themeToggle">החלף מצב</button>

שלב 3: יישום הלוגיקה ב-JavaScript

נוסיף את הקוד JavaScript שיטפל במעבר בין המצבים:

// בחירת הכפתור
const themeToggle = document.getElementById('themeToggle');

// פונקציה להחלפת המצב
function toggleTheme() {
    // בדיקה אם המצב הנוכחי הוא כהה
    const isDark = document.body.getAttribute('data-theme') === 'dark';

    // החלפת המצב
    if (isDark) {
        document.body.removeAttribute('data-theme');
        localStorage.setItem('theme', 'light');
    } else {
        document.body.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
}

// הוספת מאזין אירועים לכפתור
themeToggle.addEventListener('click', toggleTheme);

// בדיקת ההעדפה השמורה בעת טעינת הדף
function loadTheme() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        document.body.setAttribute('data-theme', 'dark');
    }
}

// טעינת ההעדפה בעת טעינת הדף
document.addEventListener('DOMContentLoaded', loadTheme);

קוד זה מוסיף פונקציונליות למעבר בין המצבים ושומר את העדפת המשתמש ב-localStorage.

שלב 4: שיפור חווית המשתמש

4.1 אנימציית מעבר

נוסיף אנימציה חלקה למעבר בין המצבים:

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

a, h1, h2, h3, h4, h5, h6, .border, button {
    transition: all 0.3s ease;
}

4.2 עדכון טקסט הכפתור

נעדכן את טקסט הכפתור בהתאם למצב הנוכחי:

function updateButtonText() {
    const isDark = document.body.getAttribute('data-theme') === 'dark';
    themeToggle.textContent = isDark ? 'עבור למצב בהיר' : 'עבור למצב כהה';
}

// עדכון הטקסט בעת לחיצה על הכפתור
themeToggle.addEventListener('click', () => {
    toggleTheme();
    updateButtonText();
});

// עדכון הטקסט בעת טעינת הדף
document.addEventListener('DOMContentLoaded', () => {
    loadTheme();
    updateButtonText();
});

שלב 5: התאמה להעדפות מערכת ההפעלה

נוסיף תמיכה בהעדפות מערכת ההפעלה של המשתמש:

// בדיקת העדפות מערכת ההפעלה
function checkSystemPreference() {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.setAttribute('data-theme', 'dark');
    } else {
        document.body.removeAttribute('data-theme');
    }
    updateButtonText();
}

// מעקב אחר שינויים בהעדפות מערכת ההפעלה
window.matchMedia('(prefers-color-scheme: dark)').addListener(checkSystemPreference);

// בדיקת העדפות בעת טעינת הדף
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        // אם יש העדפה שמורה, השתמש בה
        document.body.setAttribute('data-theme', savedTheme);
    } else {
        // אחרת, בדוק את העדפות מערכת ההפעלה
        checkSystemPreference();
    }
    updateButtonText();
});

שלב 6: התאמת תמונות ואייקונים

לעתים קרובות, תרצה להתאים גם תמונות ואייקונים למצב הכהה. הנה כמה טכניקות:

6.1 שימוש ב-CSS Filters

[data-theme="dark"] img:not([src*='.svg']) {
    filter: brightness(.8) contrast(1.2);
}

6.2 החלפת תמונות SVG

.logo {
    background-image: url('logo-light.svg');
}

[data-theme="dark"] .logo {
    background-image: url('logo-dark.svg');
}

6.3 שימוש ב-CSS Variables לאייקונים

:root {
    --icon-color: #333333;
}

[data-theme="dark"] {
    --icon-color: #ffffff;
}

.icon {
    fill: var(--icon-color);
}

שלב 7: אופטימיזציה וביצועים

7.1 טעינה מותנית של סגנונות

במקום להגדיר את כל הסגנונות מראש, ניתן לטעון אותם בצורה מותנית:

function loadDarkTheme() {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'dark-theme.css';
    document.head.appendChild(link);
}

function toggleTheme() {
    const isDark = document.body.getAttribute('data-theme') === 'dark';
    if (isDark) {
        document.body.removeAttribute('data-theme');
        localStorage.setItem('theme', 'light');
    } else {
        document.body.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
        loadDarkTheme();
    }
    updateButtonText();
}

7.2 שימוש ב-CSS Custom Properties במקום צבעים מוחלטים

במקום להשתמש בצבעים מוחלטים, השתמש במשתנים שמתייחסים למשתנים אחרים:

:root {
    --primary-color: #0066cc;
    --text-on-primary: #ffffff;
}

[data-theme="dark"] {
    --primary-color: #4da6ff;
    --text-on-primary: #000000;
}

.button {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
}

סיכום

במדריך זה למדנו כיצד ליישם Dark Mode באתר שלך באמצעות CSS Variables ו-JavaScript. כיסינו את הנושאים הבאים:

1. הגדרת CSS Variables לשליטה בצבעים

2. יצירת כפתור למעבר בין מצבים

3. יישום הלוגיקה ב-JavaScript

4. שיפור חווית המשתמש עם אנימציות ועדכון טקסט

5. התאמה להעדפות מערכת ההפעלה

6. התאמת תמונות ואייקונים למצב הכהה

7. אופטימיזציה וביצועים

יישום Dark Mode יכול לשפר משמעותית את חווית המשתמש באתר שלך, ולהפוך אותו לנגיש יותר עבור משתמשים שמעדיפים ממשק כהה. זכור תמיד לבדוק את הנגישות והקריאות של הטקסט והאלמנטים השונים בשני המצבים.

בנוסף, שקול להוסיף אפשרויות נוספות כמו מצב "אוטומטי" שעוקב אחר השעה ביום, או אפשרות לשנות את הגוונים של המצב הכהה לפי העדפות המשתמש.