react.js에서 다크 모드를 빠르고 우아하게 만드는 반응 라이브러리를 추천합니다.

우리는 항상 필요합니다. 버튼 하나로 회사 웹 사이트 또는 시스템을 다크 모드 테마로 변경하십시오. 다루기 쉬워 보이지만 실제로는 그렇지 않습니다. .

반응-다크 모드-lib react-dark-mode-lib를 권장하는 이유는 무엇입니까?

이를 수행하는 세 가지 방법이 있다고 결론지었습니다.

CSS 변경

이 방법은 이해하기 쉽고 React Dom에 변수를 바인딩합니다. 변수를 변경하면 className 또는 스타일이 변경됩니다. 그 전에 전역에서 CSS 정의를 확인해야 합니다. 예를 들어:

import { useState } from 'react'
const App= () => {
    const [status, setStatus] = useState(false)
    return (
       <>
         <button onClick={ () => setStatus(!status) }>Change color</button>
         <div className={ status ? 'activeBgColor': 'normalBgColor' }>test</div>
       </>
    )
}

  .activeBgColor {
     background: black
  }
  . normalBgColor {
    background: white
  }

문제는 명백합니다. 다중 CSS를 유지해야 합니다.

CSS3 필터 사용
다음 CSS를 추가하면 문제가 해결됩니다.

body{
    filter: invert(100%) hue-rotate(180deg) brightness(115%) contrast(95%) !important;
}

이 방법은 사용자 정의 특수 요소 CSS를 허용하지 않습니다.

CSS3 혼합 혼합 모드 사용

이 방법으로 할 수 있지만 github는 우아하고 빠르게 반응하는 라이브러리 핸들을 찾지 못했습니다. 그 이유는 왜

react-dark-mode-lib 생성 사용하는 방법

먼저 npm/yarn 도구를 사용하여 라이브러리를 설치해야 합니다.

npm install react-dark-mode-lib

가장 간단한 사용은 라이브러리 직접 가져오기입니다. 예를 들어:

import DarkMode from 'react-dark-mode-lib'
import { useState } from 'react'

const App = () => {
  const [visible, setVisible] = useState(false) 
  return (
    <DarkMode visible={visible} />
  )
}

가장 큰 특징은 JSX를 사용하여 다크 모드 레이어에서 모든 요소를 ​​생성할 수 있다는 것입니다. 예제를 실행하면 자세한 내용을 알 수 있습니다.

문제나 제안 사항이 있으면 github에서 저에게 전화해 주세요. 작업에 도움이 된다면 github에서 별표를 저에게 주세요. 감사합니다.