Как да добавите тъмни/светли или многотематични цветове само с помощта на CSS?

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

TLDR;

Без повече шум, нека започнем с внедряването на тази функция в приложение на React, но забележете, че тази функция ще използва функции само за CSS и манипулиране на DOM, така че можете да я използвате във всяка рамка/библиотека или чисто HTML/CSS приложение.

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

В горното, както можете да видите, създадох глобален файл със стилове, използвайки суфикса SCSS и дефинирах основно правило вътре в него, дефинирайки моите цветове и шрифтове. Основно root е там, за да ви помогне да централизирате вашите променливи като цветове, размери, шрифтове , полета, подложки и др.

2- Създайте компонент за тема, за да управлявате вашата функционалност за превключване на тема, както е показано по-долу:

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 бутон за превключване на нашата тема между тъмен и светъл режим, но можете да стилизирате това по ваш собствен начин, за да го направите по-елегантен!

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

Забележка: не забравяйте, че това не изобразява отново цялото ви приложение в React, но това, което правите, е манипулиране на DOM директно в манипулатор на събитие на React, така че ако искате да получите достъп до стойността на темата в цялото си приложение, използвайте във вашите компоненти можете да използвате глобален контекст и да обвиете приложението си вътре в него за вашата тема, но тъй като това унищожава единствената цел на CSS на нашата работа, ние няма да го правим тук.

3- Добавете променливи за тъмна тема и насочете темата според вашия HTML атрибут body dark.

Сега дефинирайте CSS селектор въз основа на вашия HTML атрибут на тялото, в този случай, тъй като го нарекох „them“, ще избера [theme=”dark”] тук и ще дефинирам нови цветове за моите променливи.

Лесно грах, нали?

4- Мулти тема и как се променят стойностите на променливите?

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

По принцип този подход работи по следния начин, вие дефинирате вашите променливи и цветове в основния си селектор, след това насочвате стойността на темата на тялото на HTML и променяте цвета на същите тези променливи, които сте дефинирали, 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;

Надявам се, че ви е харесало досега, така че, моля, не се колебайте да задавате вашите въпроси или подкрепа, ако ви е харесало.