CSS를 사용하여 어둡거나 밝은 또는 다중 테마 색상을 추가하는 방법은 무엇입니까?

트위터가 제공하는 것과 같은 다크/라이트 테마 또는 다중 테마 기능 구현은 요즘 모든 소형/중형/대형 웹/모바일 애플리케이션의 기본 기능 중 하나입니다. 색상 기본 설정 및 웹 또는 모바일 장치에 관계없이 응용 프로그램 전체에서 더 나은 사용자 경험을 생성하기 위해 요구 사항을 충족할 수 있는 방식으로 앱을 개발해야 합니다.

TLDR;

더 이상 고민하지 않고 React 앱 내에서 이 기능을 구현하는 것으로 시작하겠습니다. 하지만 이 기능은 CSS 전용 기능과 DOM 조작을 사용하므로 모든 프레임워크/라이브러리 또는 순수 HTML/CSS 애플리케이션에서 사용할 수 있습니다.

1- 전역 스타일링 지시문 또는 디자인 시스템을 제어하고 나타내는 전역 CSS/SCSS/Styled-Component/CSS-In-JS 파일을 정의합니다.

위에서 볼 수 있듯이 SCSS 접미사를 사용하여 전역 스타일 파일을 만들고 그 안에 내 색상과 글꼴을 정의하는 루트 규칙을 정의했습니다. 루트는 기본적으로 색상, 크기, 글꼴과 같은 변수를 중앙 집중화하는 데 도움이 됩니다. , 마진, 패딩 등

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 문서의 본문에 속성을 설정하는 것입니다. 예를 들어 여기에서는 테마 속성을 추가하고 해당 값을 내 CSS 파일에서 대상으로 지정할 수 있도록 테마 값으로 설정합니다.

참고: 이것은 React에서 전체 앱을 다시 렌더링하는 것이 아니라 React 이벤트 핸들러에서 직접 DOM 조작을 수행하므로 전체 앱에서 테마 값에 액세스하려면 구성 요소에서 사용하십시오. 전역 컨텍스트를 만들고 테마를 위해 그 안에 앱을 래핑하지만 우리 작업의 유일한 CSS 목적을 파괴하므로 여기서는 하지 않을 것입니다.

3- HTML 본문 어두운 속성에 따라 어두운 테마 변수 및 대상 테마를 추가합니다.

이제 HTML 본문 속성을 기반으로 CSS 선택기를 정의합니다. 이 경우 "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;