Styled JSX로 다크/라이트 모드 스위치를 만드는 방법

Next.js 애플리케이션이 있는 경우 Styled JSX를 사용하여 구성 요소의 스타일을 작성할 수 있습니다. 프로젝트에 기본적으로 Next.js가 Styled JSX를 포함하기 때문입니다. 이것이 귀하의 경우이거나 스스로 Styled JSX를 사용 중이고 웹 사이트에 어둡게/밝게 모드 스위치를 구현하려는 경우 이 문서가 적합합니다.

이 CSS-in-JS 라이브러리와 JavaScript를 4단계로 사용하여 몇 가지 기술을 사용하여 간단한 테마 토글(Dark <-> Light )을 구현합니다.

첫 번째 단계: 테마 정의

첫 번째 단계는 어둡고 밝은 테마에 적합한 색상을 선택하는 것입니다. 이 두 주제 사이에 맞는 색상을 정의하는 것이 어려울 수 있습니다. 카드의 깊이, 배경색, 글꼴색, 사용성, 접근성(a11y) 등의 디자인 원칙을 잘 지켜야 하기 때문입니다. 다음은 성공적인 색상 결정을 내리기 위해 귀하(또는 귀하의 디자이너)가 따를 수 있는 몇 가지 모범 사례를 보여주는 좋은 비디오입니다.

두 번째 단계: CSS 변수 생성

애플리케이션 디자인을 통해 프로젝트와 함께 사용할 CSS 변수를 생성할 수 있습니다. 이를 위해 전역 스타일을 사용하여 변수를 생성합니다. Styled JSX를 사용하면 <style jsx global 를 사용하여 전역 스타일을 추가할 수 있습니다. 이 안에서 테마 변수와 해당 값을 정의합니다. 밝은 테마를 기본 테마로 사용하고(어두운 테마일 수 있음) 선택기로 표시되는 문서 트리의 루트 요소에 설정합니다:root.

<style jsx global>{`
  :root {
    --bg-color: white;
    --primary-color: black;
    --secondary-color: rgb(113, 128, 150);
    {/* other variables */}
  }
`}</style>

세 번째 단계: 보조 테마 만들기

이제 이전에 정의된 기본 테마를 재정의할 보조 테마 값(이 경우 어두운 테마)을 추가할 차례입니다. 문서 루트 요소의 theme 데이터 속성에서 보조 테마를 정의합니다.

<style jsx global>{`
  :root {
    --bg-color: white;
    --primary-color: black;
    --secondary-color: rgb(113, 128, 150);
    {/* other variables */}
  }

  [data-theme="dark"] {
    --bg-color: #121212;
    --primary-color: #f4f4f6;
    --secondary-color: #8999b0;
    {/* other variables */}
  }
`}</style>

마지막 단계: 밝은 테마와 어두운 테마 간 전환

이 단계에서는 JavaScript를 사용하여 Styled JSX에서 수행한 정의를 사용하여 밝은 테마와 어두운 테마 사이를 전환합니다. 이를 위해 기본적으로 루트 요소에서 사용 중인 데이터 속성theme을 읽고 씁니다. 이 속성을 변경하면 자동으로 스타일 변수 값이 변경됩니다.

function switchTheme() {
  const currentTheme = document.documentElement.dataset.theme;

  if (currentTheme === 'dark') {
    document.documentElement.dataset.theme = 'light';
  } else {
    document.documentElement.dataset.theme = 'dark';
  }
}

예시

이 단계를 통해 간단한 React 구성 요소를 만들어 보겠습니다.
문서 요소에서 테마의 색상을 결정하기 위해 CSS 변수를 사용하고 있음을 알 수 있습니다. JSX 전역에서 변수를 정의했으므로 자식 구성 요소에서도 사용할 수 있습니다.

export default function Home() {
  function switchTheme() {
    const currentTheme = document.documentElement.dataset.theme;

    if (currentTheme === "dark") {
      document.documentElement.dataset.theme = "light";
    } else {
      document.documentElement.dataset.theme = "dark";
    }
  }

  return (
    <div>
      <button onClick={switchTheme}>Switch Theme</button>
      <h1>Example</h1>
      <h3>This is a simple dark mode example</h3>

      <style jsx global>{`
        :root {
          --bg-color: white;
          --primary-color: black;
          --secondary-color: rgb(113, 128, 150);
        }

        [data-theme="dark"] {
          --bg-color: #121212;
          --primary-color: #f4f4f6;
          --secondary-color: #8999b0;
        }

        body {
          background: var(--bg-color);
          transition: background 0.5s;
        }

        h1 {
          color: var(--primary-color);
        }

        h3 {
          color: var(--secondary-color);
        }
      `}</style>
    </div>
  );
}

Click here 작업 예제를 보려면.