ReactJS - Tailwind를 사용한 다크 모드

오늘날 대부분의 웹사이트/앱은 다크 모드로 구축되어 웹사이트에서 가장 중요한 구현 중 하나가 되었습니다.

하지만 웹사이트에서 어떻게 구현할 수 있습니까?
첫 번째 단계: create-react-app이 이미 설치되어 있다면 프로젝트에 tailwind를 설치해야 합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

두 번째 단계: 이 단계는 선택 사항이지만 이 튜토리얼의 단순성을 위해 DarkModeSwitch React 라이브러리를 설치하는 것이 좋습니다. 이 라이브러리에는 이미 멋진 애니메이션과 스타일이 포함된 구성 요소가 내장되어 있으며 정말 쉽게 사용자 정의할 수 있습니다.

npm i react-toggle-dark-mode

또는

react-toggle-dark-mode - npm

블로그에서 볼 수 있는 애니메이션 다크 모드 토글!. 최신 버전: 1.1.0, 마지막 게시: 3개월 전. `npm i react-toggle-dark-mode`를 실행하여 프로젝트에서 react-toggle-dark-mode 사용을 시작하세요. npm 레지스트리에는 react-toggle-dark-mode를 사용하는 2개의 다른 프로젝트가 있습니다.



npmjs.com





이제 useDarkMode.js 후크를 만들 수 있습니다.

import {useEffect, useState} from "react"

export default function useDarkMode() {

    const [isDarkMode, setDarkMode] = useState(localStorage.theme)
    const colorTheme = isDarkMode === "dark" ? "light" : "dark"

    useEffect(()=> {
        document.documentElement.classList.remove(colorTheme)
        document.documentElement.classList.add(isDarkMode)

        localStorage.setItem("theme", isDarkMode)
    }, [isDarkMode, colorTheme])

    return [colorTheme, setDarkMode]
}

그래서 정확히 무엇을합니까?
기본적으로 첫 번째 상태는 로컬 스토리지 내부에 있는 값을 가지므로 페이지를 떠났다가 다시 돌아올 때마다 선호하는 테마를 사용하게 됩니다.

colorTheme은 isDarkMode 상태의 값을 포함합니다.

useEffect() 후크를 사용하면 [colorTheme 또는 setDarkMode가 변경]될 때만 내부 코드를 실행할 수 있습니다.

이제 useEffect 후크 내에서 웹사이트의 색상 테마를 정의합니다. 첫 번째 줄은 colorTheme 상태에 따라 이름이 지정된 클래스를 제거합니다. 이 상태는 항상 현재 테마의 반대 값(dark = light)을 포함한다는 것을 기억한다면. 따라서 어두운 테마로 전환하면 밝은 테마가 제거되고 다음 줄에 "true"테마인 isDarkMode 상태의 클래스가 추가됩니다.

그런 다음 localstorage 값을 설정합니다.

마지막으로 [colorTheme, setDarkMode]를 반환하므로 다른 파일에서 후크를 사용할 수 있습니다.

이제 DarkModeToggle.jsx 구성 요소를 만들 수 있습니다.

이 구성 요소에는 다크 모드 토글이 포함됩니다.

import React, { useState } from 'react'
import { DarkModeSwitch } from "react-toggle-dark-mode";
import useDarkMode from '../hooks/useDarkMode';

function DarkModeToggle() {

    const [colorTheme, setTheme] = useDarkMode();
    const [isDarkMode, setDarkMode] = useState( colorTheme === "light" ? true : false);

    const toggleDarkMode = (checked) => {
        setTheme(colorTheme)
        setDarkMode(checked);
    };


  return (
    <div>
        <DarkModeSwitch
        onChange={toggleDarkMode} 
        checked={isDarkMode}
        size={25}
        />
    </div>
  )
}

export default Switcher

useDarkMode() 후크 내부에 있는 colorTheme 상태를 초기화한 다음 테마를 전환할 상태를 초기화해야 합니다.

다음으로 구성 요소에서 변수 확인 값을 받는 함수를 만듭니다( https://www.npmjs.com/package/react-toggle-dark-mode ).

이제 함수를 onChange 값으로 내부에 넣겠습니다.


이제 Tailwind를 어떻게 구현할 수 있습니까?

간단 해! 예를 들어 "dark:bg-gray-900"과 같이 클래스 이름을 설정하기만 하면 됩니다. 클래스 앞에 "dark:"를 입력할 때마다 이 클래스는 테마가 어둡게 설정된 경우에만 "활성화"됩니다.

Tailwind 문서https://tailwindcss.com/docs/dark-mode에서 자세한 내용을 읽어보세요.