Настройка темного режима с помощью переменных CSS и JavaScript

Реализация темного режима для вашего приложения или веб-сайта имеет решающее значение для обеспечения бесперебойного взаимодействия с пользователем. Встроенные медиа-правила CSS позволяют браузерам обнаруживать установленные системой темные режимы, но пользователи могут предпочесть другую тему для определенных сайтов или браузеров, которые еще не поддерживают ее, например Microsoft Edge.

По адресу при этом мы можем использовать переменные CSS и JavaScript для управления настройками темы.

Настройка CSS с помощью переменных и тем

Определите переменные CSS на корневом уровне или уровне по умолчанию и укажите темная тема:

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}

Вызовите переменные там, где это необходимо для динамической настройки стилей.

JavaScript для определения и переключения тем

В разделе заголовка вашего HTML добавьте JavaScript для определения предпочтительной темы пользователя:

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

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

const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

HTML для переключения тем

Создайте флажок HTML для переключения тем, управляемых пользователем:

Благодаря такому подходу вы можете автоматически определять тему пользователя, разрешать ему переопределять ее и обеспечивать индивидуальный подход к различным браузерам и платформам.