Как переключать глобальные свойства CSS?

Как переключать глобальные свойства CSS?

Переключение глобальных CSS свойств (CSS переменных) — это мощный механизм для управления темами, брендингом и динамической стилизацией приложения. Существует несколько подходов для реализации этого функционала в современных веб-приложениях.

Управление CSS переменными через JavaScript

Самый прямой способ — изменять CSS переменные через document.documentElement.style.setProperty():

// Установка CSS переменной
document.documentElement.style.setProperty("--primary-color", "#3b82f6");
document.documentElement.style.setProperty("--text-color", "#000000");

// Получение значения CSS переменной
const primaryColor = getComputedStyle(document.documentElement)
  .getPropertyValue("--primary-color").trim();

console.log(primaryColor); // #3b82f6

// Удаление CSS переменной
document.documentElement.style.removeProperty("--primary-color");

Переключение тем с помощью класса

Популярный подход — добавлять класс к элементу html и определять переменные для каждой темы:

/* CSS */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

html.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

// JavaScript
function toggleTheme() {
  const isDark = document.documentElement.classList.toggle("dark-theme");
  localStorage.setItem("theme", isDark ? "dark" : "light");
}

// Восстановление темы при загрузке
const savedTheme = localStorage.getItem("theme") || "light";
if (savedTheme === "dark") {
  document.documentElement.classList.add("dark-theme");
}

React Hook для управления темой

В React приложениях удобно создать кастомный хук:

import { useState, useEffect } from "react";

function useTheme() {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const savedTheme = localStorage.getItem("theme") || "light";
    setTheme(savedTheme);
    document.documentElement.classList.toggle("dark-theme", savedTheme === "dark");
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    localStorage.setItem("theme", newTheme);
    document.documentElement.classList.toggle("dark-theme");
  };

  return { theme, toggleTheme };
}

export default useTheme;

Использование CSS переменных в стилях

Определите переменные и используйте их в CSS:

:root {
  --primary-color: #3b82f6;
  --secondary-color: #10b981;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

body {
  background-color: var(--bg-color, #ffffff);
  color: var(--text-color, #000000);
}

button {
  padding: calc(var(--spacing-unit) * 2);
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

Производительность и best practices

При переключении множества переменных используйте batch-операции для предотвращения reflow:

function applyTheme(theme) {
  const cssText = theme === "dark"
    ? `--bg: #1a1a1a; --text: #fff; --border: #333;`
    : `--bg: #fff; --text: #000; --border: #ddd;`;
  
  document.documentElement.style.cssText = cssText;
}

Выбирайте подход в зависимости от сложности вашего приложения: простые переменные — CSS классы, сложные темы с множеством параметров — React контекст с хуками.