Автоматический темный режим с JavaScript

Одной из самых востребованных функций в приложениях является темный режим. Многим пользователям темный режим обеспечивает более приятный для глаз интерфейс с меньшим количеством белых тонов, вызывающих утомление глаз. Также известно, что темный режим экономит заряд батареи на экранах AMOLED.

Часто веб-дизайнеры используют prefers-color-schemeфункцию мультимедиа CSS, чтобы предоставить другую тему, когда включен темный режим. prefers-color-schemeполучает предпочтения пользователя через настройку ОС или настройку пользовательского агента. Вот простой пример:

/* Style rules for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
/* Style rules for light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

const darkMode = window.matchMedia("(prefers-color-scheme:dark)").matches;

Темный режим — чрезвычайно полезная функция для большинства пользователей. Воспользуйтесь этим matchMedia()методом, чтобы предоставить пользователям лучший опыт.

Если вам понравилась эта статья, вам также может понравиться книга Фараза Келхини « Современный асинхронный JavaScript » . До 15 мая 2022 г. вы можете использовать промокод fkajs_medium_35 , чтобы сэкономить 35% на электронной версии книги. Промокоды не действуют на предыдущие покупки.

Статьи Фараза Кельхини