Jak dodać ciemne/jasne lub wielokolorowe kolory tylko za pomocą CSS?

Implementacja ciemnego/jasnego motywu lub wielu motywów, taka jak ta, którą oferuje Twitter, jest obecnie jedną z podstawowych funkcji każdej małej/średniej/dużej aplikacji internetowej/mobilnej, ponieważ zdecydowana większość osób korzystających z tych aplikacji z dużym prawdopodobieństwem będzie miała preferencje dotyczące kolorów i powinieneś opracować swoją aplikację w taki sposób, aby móc zaspokoić ich potrzeby, aby zapewnić lepsze wrażenia użytkownika w całej aplikacji, bez względu na to, czy korzystasz z Internetu, czy urządzeń mobilnych.

TLDR;

Bez zbędnych ceregieli zacznijmy wdrażać tę funkcję w aplikacji React, ale zauważmy, że ta funkcja będzie wykorzystywać tylko funkcje CSS i manipulację DOM, więc możesz jej używać w dowolnym frameworku/bibliotece lub czystej aplikacji HTML/CSS.

1- Zdefiniuj globalny plik CSS/SCSS/Styled-Component/CSS-In-JS, który kontroluje i reprezentuje Twoje globalne dyrektywy stylistyczne lub system projektowania.

Jak widać powyżej, utworzyłem globalny plik stylów przy użyciu sufiksu SCSS i zdefiniowałem w nim regułę root definiującą moje kolory i czcionki, root jest zasadniczo po to, aby pomóc Ci scentralizować zmienne, takie jak kolory, rozmiary, czcionki , marginesy, dopełnienia itp.

2- Utwórz komponent motywu, aby obsługiwać funkcję przełączania motywu, jak poniżej:

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;

Najważniejszą częścią tutaj jest ustawienie atrybutu w treści dokumentu HTML, na przykład tutaj dodaję atrybut motywu i ustawiam jego wartość na moją wartość motywu, aby móc kierować go w moim pliku CSS.

Uwaga: pamiętaj, że nie powoduje to ponownego renderowania całej aplikacji w React, ale to, co robisz, to manipulacja DOM bezpośrednio w module obsługi zdarzeń React, więc jeśli chcesz uzyskać dostęp do wartości motywu w całej aplikacji, użyj jej w swoich komponentach, których możesz użyć kontekst globalny i zawiń w niego swoją aplikację dla swojego motywu, ale ponieważ niszczy to jedyny cel naszej pracy CSS, nie będziemy tego robić tutaj.

3- Dodaj zmienne ciemnego motywu i motyw docelowy zgodnie z ciemnym atrybutem treści HTML.

Teraz zdefiniuj selektor CSS na podstawie atrybutu body HTML, w tym przypadku, ponieważ nazwałem go „oni”, wybiorę tutaj [theme=”dark”] i zdefiniuję nowe kolory dla moich zmiennych.

Łatwe, prawda?

4- Wielotematyczny i jak zmieniane są wartości zmiennych?

Dzięki powyższemu podejściu możesz użyć wielu wartości motywu, a nawet uczynić go dynamicznym, dzięki czemu możesz nie tylko mieć tryby ciemne i jasne, ale także tworzyć inne typy, takie jak niebieski lub czerwony itp.

Zasadniczo to podejście działa w ten sposób, definiujesz zmienne i kolory w selektorze głównym, a następnie kierujesz wartość motywu treści HTML i zmieniasz kolor tych samych zmiennych, które zdefiniowałeś, CSS automatycznie zastąpi nowe kolory w twojej aplikacji .

Bonus: jeśli chcesz zachować wartość motywu w swojej aplikacji, możesz zapisać ją w danych profilu użytkownika w swojej bazie danych, ale najłatwiejszym podejściem jest przechowywanie wartości w pamięci lokalnej.

Ustawiam element motywu w mojej pamięci lokalnej i za każdym razem, gdy moja aplikacja jest mocno odświeżana lub jeśli zamykam sesję (kartę) i wracam ponownie, odczytuję dane motywu z pamięci lokalnej.

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;