Переопределение настроек собственной цветовой схемы

Реализация темных режимов стала критически важной в связи с их широким распространением в различных операционных системах. Хотя встроенная поддержка браузера существует посредством медиа-правила CSS @media (prefers-color-scheme: dark), она может не полностью соответствовать предпочтениям пользователя или не соответствовать неподдерживаемым браузерам, таким как Microsoft Edge.

Отделение системных настроек из темы веб-сайта

Чтобы обеспечить оптимальный пользовательский контроль, крайне важно разрешить пользователям переопределять настройки цветовой схемы системы. Это гарантирует, что они смогут выбрать тему, которую предпочитают для конкретного веб-сайта. Для этого используется комбинация переменных CSS и JavaScript.

Конфигурация CSS

Переменные CSS определяют параметры темы:

:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}

Переменные используются во всей таблице стилей для обеспечения гибкости:

body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}

Реализация JavaScript

JavaScript играет ключевую роль в определении предпочтений пользователя и переключении между темами:

function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();

Функция toggleTheme управляет переключением тем:

function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}

Этот JavaScript обеспечивает автоматическое определение темы и позволяет пользователям переопределять ее с помощью флажка:

Заключение

Объединив переменные CSS и JavaScript, мы даем пользователям возможность управлять цветовой схемой веб-сайта независимо от настроек системы. . Такой подход обеспечивает улучшенный пользовательский опыт с учетом индивидуальных предпочтений и ограничений различных браузеров.