Изменение цветовой темы сайта JS через CSS :root переменные

Быстрый ответ

Способ изменения CSS переменных для :root с помощью JavaScript прост и быстр. Вам просто нужно обратиться к document.documentElement (корневому элементу HTML) и использовать метод style.setProperty():

// Переключаемся на светлую тему, изменяя `--color-var` на '#ff4500'
document.documentElement.style.setProperty('--color-var', '#ff4500');

--color-var — это имя вашей переменной, а #ff4500 — новое значение цвета. Замените их согласно вашим потребностям.

Гибкость в темах JavaScript

Сохранение настроек темы

Опция сохранения пользовательского опыта позволяет нам оставить тему интерфейса прежней между сессиями браузера. Это можно сделать с помощью localStorage:

// Активируем светлую тему, меняем значение --color-var и сохраняем его в localStorage
const newColor = '#ff4500';
document.documentElement.style.setProperty('--color-var', newColor);
localStorage.setItem('themeColor', newColor);

Восстановить настройки при повторном посещении сайта пользователя можно просто:

// Добро пожаловать обратно! Вот настройки темы, которыми вы пользовались в прошлый раз:
const savedColor = localStorage.getItem('themeColor');
if (savedColor) {
  document.documentElement.style.setProperty('--color-var', savedColor);
}

Подробнее об этом расскажет наш спикер на видео

Учет пользовательских предпочтений

Учитывайте предпочтения пользователей между светлыми и темными темами с помощью функции window.matchMedia() в JavaScript:

// У каждого свой выбор. Какую тему предпочитаете: светлую или темную?
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // Переходим на темную тему для любителей ночного режима
  document.documentElement.style.setProperty('--background-color', '#333');
  document.documentElement.style.setProperty('--text-color', '#fff');
} else {
  // Переходим на светлую тему, создаем атмосферу светлого дня
  document.documentElement.style.setProperty('--background-color', '#fff');
  document.documentElement.style.setProperty('--text-color', '#333');
}

Пакет изменений переменных

Если вам требуется изменить несколько переменных одновременно, это также можно сделать. Для этого достаточно собрать их в объект и применить в цикле JavaScript:

const themeColors = {
  '--background-color': '#282c34',
  '--text-color': '#f7f7f7',
  '--highlight-color': '#ff4081'
};

// Меняем стили интерфейса всего одной командой!
Object.entries(themeColors).forEach(([key, value]) => {
  document.documentElement.style.setProperty(key, value);
});

Визуализация

Понимайте это так:

Ваша HTML-страница — это 🏠. В этом доме разноцветные 💡, метками которых являются переменные CSS :root.

Управление этими "светильниками" аналогично управлению переменными из :root с помощью JavaScript:

// Включаем РОЗОВЫЙ свет! (Необычный выбор, но это ваш рычаг управления)
document.documentElement.style.setProperty('--light-color', '#FF69B4');

Такова динамика изменений:

До: 🏠 освещен обычными 💡[Синий, Зелёный, Красный]

После: 🏠 оживает в цветовой гамме 💡[💗, Зелёный, Красный]

Синий цвет сменяется на розовый по вашей команде!

Использование JavaScript на полную мощность: продвинутые приёмы и потенциальные трудности

Создание динамических тем

Хотите сделать дизайн сайта более интересным, внедряя новые стилевые решения? Добавьте их в таблицу стилей "на лету", обогащая интерфейс пользователя, с помощью метода insertRule():

// Добавляем новый стиль магической командой!
const newStyle = '--new-theme-color: #4a90e2;';
document.styleSheets[0].insertRule(`:root { ${newStyle} }`, 0);

Получение значений CSS переменных

Для того чтобы аккуратно извлечь значение существующей переменной, используйте функцию getComputedStyle():

// Шпионим за стилями. Какое значение у нашего основного цвета?:
const rootStyles = getComputedStyle(document.documentElement);
const mainColor = rootStyles.getPropertyValue('--main-color').trim();
// Теперь вы знаете, какое значение используется для --main-color.

Локальные переменные для элементов

Несмотря на то, что :root дает глобальный доступ, иногда бывает полезно менять переменные CSS непосредственно для конкретных элементов:

let button = document.querySelector('.my-button');
button.style.setProperty('--button-hover-color', '#FF6347');

Здесь переменная --button-hover-color будет применяться только для элементов с классом .my-button.

Применение свойства color-scheme

Вы можете использовать свойство color-scheme для автоматического переключения между светлыми и темными темами:

:root {
    color-scheme: light dark;
}

Учитывая color-scheme, браузер выполнит переключение тем самостоятельно.

Полезные материалы

1. Использование CSS пользовательских свойств (переменных) – CSS: Cascading Style Sheets | MDN — Ознакомьтесь с основами работы CSS пользовательских свойств.
2. JavaScript DOM CSS – W3Schools — Изучите инструменты для управления DOM и стилями в JavaScript: настройте CSS под свои требования!
3. Полное руководство по пользовательским свойствам | CSS-Tricks — Погрузитесь в тонкости работы с CSS переменными в руководстве от CSS-Tricks.
4. Обновление CSS переменной с помощью JavaScript | CSS-Tricks — Узнайте, как применять динамические CSS переменные в сочетании с JavaScript.
5. Стили и классы – JavaScript.info — Станьте мастером по модификации стилей документа.
6. Генерация случайного числа между двумя числами в JavaScript – Stack Overflow — Экспериментируйте и открывайте для себя новые решения в диалогах о генерации случайных чисел!