Как добавить темные/светлые или мультитематические цвета только с помощью CSS?

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

TLDR;

Без дальнейших церемоний давайте начнем с реализации этой функции в приложении React, но обратите внимание, что эта функция будет использовать функции только CSS и манипулирование DOM, поэтому вы можете использовать ее в любом фреймворке/библиотеке или чистом приложении HTML/CSS.

1- Определите глобальный файл CSS/SCSS/Styled-Component/CSS-In-JS, который контролирует и представляет ваши глобальные директивы стилей или систему дизайна.

В приведенном выше примере, как вы можете видеть, я создал глобальный файл стилей, используя суффикс SCSS, и определил внутри него корневое правило, определяющее мои цвета и шрифты. В основном root помогает вам централизовать ваши переменные, такие как цвета, размеры, шрифты. , поля, отступы и т. д.

2- Создайте компонент Theme, чтобы управлять функциями переключения темы, как показано ниже:

import { useState } from "react";

const Theme = () => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prev) => {
      const newThemeValue = prev === "light" ? "dark" : "light";

      // Add theme attribute with respective them value of the state
      document.body.setAttribute("theme", newThemeValue);

      return newThemeValue;
    });
  };

  return (
    <div>
      <button onClick={toggleTheme}>
        {theme === "light" ? "dark" : "light"}
      </button>
    </div>
  );
};

export default Theme;

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

Примечание: помните, что это не перерисовывает все ваше приложение в React, а то, что вы делаете, — это манипулирование DOM непосредственно в обработчике событий React, поэтому, если вы хотите получить доступ к значению темы во всем приложении, используйте его в своих компонентах, которые вы можете использовать глобальный контекст и оберните в него ваше приложение для вашей темы, но, поскольку это разрушает единственную цель нашей работы с CSS, мы не собираемся делать это здесь.

3- Добавьте переменные темной темы и целевую тему в соответствии с темным атрибутом вашего HTML-тела.

Теперь определите селектор CSS на основе вашего атрибута HTML body, в этом случае, поскольку я назвал его «они», я собираюсь выбрать здесь [theme = «dark»] и определить новые цвета для моих переменных.

Легко peasy не так ли?

4- Мультитема и как меняются значения переменных?

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

По сути, этот подход работает следующим образом: вы определяете свои переменные и цвета в своем корневом селекторе, затем вы выбираете значение темы HTML body и меняете цвет тех же самых переменных, которые вы определили, CSS автоматически заменяет новые цвета внутри вашего приложения. .

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

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

import { useEffect, useState } from "react";

const Theme = () => {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    const currentTheme = localStorage.getItem("theme");
    if (currentTheme) {
      setTheme(currentTheme);
      document.body.setAttribute("theme", currentTheme);
    }
  }, []);

  const toggleTheme = () => {
    setTheme((prev) => {
      const newThemeValue = prev === "light" ? "dark" : "light";

      // Add theme attribute with respective them value of the state
      document.body.setAttribute("theme", newThemeValue);
      // Persist the current theme value in localStorage
      localStorage.setItem("theme", newThemeValue);

      return newThemeValue;
    });
  };

  return (
    <div>
      <button onClick={toggleTheme}>
        {theme === "light" ? "dark" : "light"}
      </button>
    </div>
  );
};

export default Theme;