איך עשינו כפתור של מצב לילה באתר?

איתי גולדמן צד לקוח 10 במאי, 2022

מתג להפעלת מצב לילה באתר. לאחרונה זה אופנתי, אבל גם הכרחי למי שרוצה להיטיב עם עיניי הגולשים בשעות החשכה. אמנם, ישנם תוספים לדפדפן המאפשרים בדיוק את הדבר הזה כמו Dark Reader עבור כרום. אנחנו בחרנו לעשות את זה בעצמנו לא רק כי זה קל. גם כי רצינו יותר שליטה בנושא הצבעים – הכנה ל- Themes (ערכות נושא) וכו'. בואו ללמוד איך עשינו את זה כאן.

שלב א' – הוספת מתג ההפעלה

האמת הכי קלאסי לעשות את זה בעזרת סליידר כזה קטן שמזיזים ימינה שמאלה. למשל כמו החל מ- Bootstrap 4. אנחנו בחרנו להוסיף לינק קטן עם שני מצבים: ירח ושמש. גם קלאסי וגם קל לעיצוב. הנה קצת קוד שכתבתי כי באמת זה במשהו די פשוט (כן, ברור שזו אדפטציה למשהו שמצאנו בגוגל).

function handle_dark_click() {
	var darkMode = localStorage.getItem("dark-mode");
	if (darkMode === "enabled") {
		disable_dark();
	} else {
		enable_dark();
	}
}

function enable_dark() {
	document.body.classList.add('dark')
	localStorage.setItem("dark-mode", "enabled");
	document.getElementById('toggle-theme').innerText = '🌞'

}

function disable_dark() {
	document.body.classList.remove('dark')
	localStorage.removeItem("dark-mode");
	document.getElementById('toggle-theme').innerText = '🌛'
}

// this part on load, or after render of button.
var darkMode = localStorage.getItem("dark-mode");

if (darkMode === 'enabled') {
	enable_dark();
}

// document.getElementById('toggle-theme').addEventListener('click', handle_dark_click)

הקוד מדבר בעד עצמו. הוא מוסיף קצת לוגיקה ללחיצת הכפתור. הנקודה לשים לב פה היא שבסופו של דבר התוצאה של הפעלת המתג היא הוספת או הורדת הקלאס "dark" מה- <body> של המסמך. זה מוביל אותנו לנקודה הבאה

שלב ב' – הוספת LESS או SASS שידרוס את הקיים

למי שלא מכיר, SASS זה כמו- CSS רק יותר נוח לכתיבה. הרעיון כאן הוא לשנות את הצבעים של העמוד בהתאם למצב הלילה, כן או לא. ניקח לדוגמא את ה- SASS הבא שמתייחס למקטע מסוים באתר.

// normal mode
div.something {
	background: black;
	color: gray;
}

// this is the dark mode trick:
body.dark {
	div.something {
		background: white;
		// color: gray;
	}
}

הסבר: אנחנו מתחילים מהמצב הרגיל (שהרי כך כתבנו את האתר). ואז אנחנו מוסיפים override במקרה שה- body שלנו הוא dark בקלאס שלו. אגב, הסלקטור של מצב הלילה יהיה בעדיפות גבוהה יותר מהסלקטור הרגיל, ולכן אכן יתרחש כאן override כפי שאנחנו רוצים.

שלב ג' – ה- HTML של מתג ההפעלה

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

<a href id="toggle-theme" onclick="handle_dark_click(); return false">
	🌛
</a>

<div class="something"><h1>hello world</h1></div>

והתוצאה? אתם יכולים לראות אותה באתר שלנו. או כאן:

See the Pen Untitled by IT goldman (@itay_goldman) on CodePen.

בהצלחה

איך עשינו כפתור של מצב לילה באתר?