반응에서 쉬운 다크 모드 (및 다중 색상 테마!)

이 안내서는 사용 편의성 및 팀 온 보딩에 중점을 둔 React 응용 프로그램에서 간단한 다크 모드 구현을 보여줍니다. 복잡한 CSS 전략을 피하고 깨끗하고 효율적인 솔루션을 위해 CSS 변수 및 데이터 속성을 활용합니다.

대형 React 프로젝트에서 스타일을 관리하고 Dark Mode를 구현하는 데 어려움을 겪는 것은 종종 복잡한 솔루션으로 이어집니다. 많은 옵션이 존재하지만 특정 CSS 방법론이나 프레임 워크에 자주 의존합니다. 이 접근법은 단순성과 속도를 우선시하여 다양한 기술 수준의 팀에 이상적입니다.

CSS 변수와 useLocalStorage 후크를 결합한 개선 된 방법은 강력하고 사용자 친화적 인 테마 시스템을 제공합니다. 이 튜토리얼은이 시스템을 처음부터 처음부터 설정하고 실행하여 새로운 React 앱에서 효과를 보여줍니다. 또한 강화 된 CSS 조직을위한 react-scoped-css 와의 통합을 보여줍니다.

프로젝트 설정

이 안내서는 CSS, JavaScript 및 React에 대한 기본적인 친숙 함을 가정합니다. 노드와 NPM이 설치되어 있는지 확인하십시오. 다음을 사용하여 새 React 앱을 만듭니다.

 NPX Create-React-App Easy-React-Themes--template typescript

(JavaScript의 경우 --template typescript easy-react-themes 하십시오. 코드 편집기 (예 : cd easy-react-themes; code . )를 사용하여 코드 vs 코드에서 프로젝트를 열고 개발 서버 ( npm start )를 시작하십시오. 마지막으로 use-local-storage 설치하십시오.

 npm 나는 로컬 스토리지를 사용합니다

코드 구현

App.css 의 내용을 지우십시오. index.css 에서 CSS 변수를 사용하여 테마를 정의하십시오.

 : 루트 {
  -백백 : 흰색;
  --text- 프라이 사항 : 검은 색;
  -text-secondary : RoyalBlue;
  -Accent : 자주색;
}
[Data-Theme = 'Dark'] {
  -백백 : 검은 색;
  --text- 프라이밍 : 흰색;
  --text-secondary : 회색;
  -Accent : Darkred;
}

이는 CSS 사용자 정의 속성 (변수) 및 데이터 속성을 사용합니다. [data-theme='dark'] 선택기는 data-theme 속성이 'Dark'로 설정되면 :root 변수를 무시합니다.

App.tsx 에서 useLocalStorage 가져 오기 :

 '사용-로컬 스토리지'에서 Uselocalstorage 가져 오기;

그런 다음 테마 상태를 관리합니다.

 const defaultdark = wind
const [테마, setTheme] = uselocalstorage ( '테마', defaultdark? 'dark': 'light');

이는 useLocalStorage 사용하여 브라우저 기본 설정에 관계없이 세션에서 테마 선택을 지속합니다. data-theme 속성은 최상위에 적용됩니다<div> :<pre class="brush:php;toolbar:false">&lt;div data-theme=&quot;{theme}&quot;&gt; {/ * 귀하의 앱 컨텐츠 여기 */} &lt;/div&gt;</pre> <p>CSS 변수를 사용하여 <code>App.css 에서 구성 요소를 스타일링하십시오.

 .앱 {
  색상 : var (-Text-Primary);
  배경색 : var (-배경);
  / * ... 다른 스타일 ... */
  전환 : 모든 .5;
}
버튼 {
  / * ... CSS 변수를 사용하는 버튼 스타일 ... */
  전환 : 모든 .5;
}

이렇게하면 테마가 변경되면 스타일이 원활하게 업데이트됩니다. 테마를 전환하려면 버튼을 추가하십시오.

응용 프로그램 확장

시스템의 확장 성을 보여주기 위해 새로운 구성 요소 (예 : 색상 정사각형)를 추가하십시오. 이 구성 요소를 App.tsx 로 가져옵니다.

보너스 : React Scoped CSS와 통합

개선 된 CSS 조직의 경우 react-scoped-css 통합하십시오. Craco 및 craco-plugin-scoped-css 의 설치 지침을 따르십시오. CSS 파일의 이름을 바꾸고 (예 : app.css 를 app.scoped.css )로 바꾸고 그에 따라 가져 오기를 업데이트하십시오. CSS 변수의 글로벌 적용을 보장하기 위해 index.css 꺼내려고합니다.

이 접근법은 RECT 응용 프로그램에서 다크 모드 및 여러 테마를 구현하기위한 간단하고 효과적이며 유지 관리 가능한 솔루션을 제공합니다. Github 저장소 및 Live Demo는 추가 리소스를 제공합니다.