איך להתאים את האתר למצב ״Dark mode״ בהתאם להעדפות הגולש (טיפ CSS ששווה להכיר)

prefers-color-scheme הינה Media Query שניתן להשתמש בה כדי לזהות מה העדפת המשתמש קצה מבחינת ערכות נושא של צבעים בהירים או כהים.

משתמש יכול לציין את העדפתו באמצעות הגדרת מערכת הפעלה (למשל מצב Light או Dark) או באמצעות הגדרות הדפדפן.

הדרך הכי נוחה להטמיע תמיכה של Dark mode היא לפוסטים שאנחנו כותבים בבלוג.

על ידי טרגוט הקלאס .elementor-widget-theme-post-content אנחנו יכולים להשפיע על צבעי ה-theme של אך ורק תוכן הפוסט – ללא שינוי על שאר הצבעים באתר

Dark theme לתוכן פוסט באלמנטור

@media (prefers-color-scheme: dark) {
  .elementor-widget-theme-post-content {
  background-color: rgb(31, 31, 31);
 --e-global-color-text:rgb(191, 191, 191);
  }
 .elementor-widget-theme-post-content a {
	 color:rgb(191, 191, 191);}
}
Code language: CSS (css)

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

Caniuse: קיימת תמיכה גלובלית של 94.79% עם הערה חשובה: התמיכה בהעדפה של color scheme תלויה במכשיר אם הוא עצמו תומך בהעדפה של theme בהיר או כהה.