Dark Mode는 React 및 Temprovider로 전환합니다

이 기사에서는 스타일의 경쟁사를 사용하여 React 응용 프로그램에 대한 다크 모드 토글을 만드는 방법을 보여줍니다. 여기에는 프로젝트 설정, 밝고 어두운 테마 생성, 토글 기능 구현, 재사용 가능한 토글 구성 요소 구축 및 사용자가 선호하는 색 구성표를 활용하는 것이 포함됩니다. 명확성과 간결함을 위해 텍스트를 개선합시다.

많은 웹 사이트는 이제 어두운 모드를 제공하여 가독성을 향상시키고 눈 변형을 줄입니다. 이 튜토리얼은 스타일링 컴포넌트와 사용자 정의 후크를 사용하여 React 앱에 대한 다크 모드 토글을 구축하도록 안내합니다.

프로젝트 설정

create-react-app 사용하여 새로운 React 프로젝트를 작성하여 시작하십시오.

 NPX Create-React-App My-App
CD My-App
원사 시작

스타일링 컴포넌트 설치 :

 원사는 스타일의 구성 요소를 추가합니다

테마 변수에 대한 theme.js 만듭니다.

 // 테마 .js
내보내기 const lighttheme = {
  바디 : '#e2e2e2',
  텍스트 : '#363537',
  토글 보더 : '#fff',
  그라디언트 : '선형 등급 ( #39598a, #79d7ed)',
};

내보내기 const darktheme = {
  바디 : '#363537',
  텍스트 : '#fafafa',
  토글 보더 : '#6B8096',
  그라디언트 : '선형 그레이드 ( #091236, #1e215d)',
};

기본 스타일을위한 global.js :

 // global.js
'Styled-Components'에서 {createglobalstyle} 가져 오기;

Const GlobalStyles = CreateGlobalstyle`을 내보내십시오
  *, *:: After, *:: 이전 {Box-Sizing : Border-Box; }
  몸 {
    정렬 구조 : 센터;
    배경 : $ {({테마}) => 테마};
    색상 : $ {({테마}) => 테마 .text};
    디스플레이 : Flex;
    플렉스 방향 : 열;
    정당화 컨텐츠 : 센터;
    높이 : 100VH;
    여백 : 0;
    패딩 : 0;
    Font-Family : BlinkMacsystemFont, -Apple-System, 'Segoe UI', Roboto, Helvetica, Arial, Sans-Serif;
    전환 : 모든 0.25S 선형;
  }
`;;

App.js 초기화 :

 // app.js
'React'에서 React React;
'Styled-Components'에서 {themeprovider} 가져 오기;
'./theme'에서 {lighttheme} 가져 오기;
'./global'에서 {globalstyles} 가져 오기;

기능 앱 () {
  반품 (
    <themeprovider theme="{lightTheme}">
      <globalstyles></globalstyles>
      <h1 id="가벼운-테마입니다">가벼운 테마입니다!</h1>
    </themeprovider>
  );
}

기본 앱 내보내기;

토글 구현

useState 가져 오기 및 테마 토글링 로직 추가 :

 // app.js
import React, {usestate} 'react';
// ... 기타 수입

기능 앱 () {
  const [테마, setTheme] = usestate ( 'light');
  const toggletheme = () => setTheme (테마 === 'light'? 'dark': 'light');

  const thememode = 테마 === 'light'? Lighttheme : Darktheme;

  반품 (
    <themeprovider theme="{themeMode}">
      <globalstyles></globalstyles>
      <button onclick="{toggleTheme}">테마 토글</button>
      <h1 id="테마-light-입니까-Light-Dark-테마">{테마 === 'light'입니까? 'Light': 'Dark'} 테마!</h1>
    </themeprovider>
  );
}

GlobalStyles 테마 색상을 동적으로 적용합니다.

재사용 가능한 토글 구성 요소 생성

Toggle.js 생성하고 (스타일링을 위해 선택적으로 Toggle.styled.js ) :

 // toggle.js
'React'에서 React React;
'prop-types'에서 proptypes 가져 오기;
'스타일의 경쟁자'에서 스타일링 된 수입;
'./icons/moon.svg'에서 {reactComponent as Moonicon} import import; // SVG를 가져옵니다
'./icons/sun.svg'에서 {ReactComponent as Sunicon} import import;


const togglecontainer = Styled.button`
  / * ... 이전 예제의 스타일 ... */
`;;

const toggle = ({테마, toggletheme}) => {
  const islight = 테마 === '빛';
  반품 (
    <togglecontainer lighttheme="{isLight}" onclick="{toggleTheme}">
      <sunicon></sunicon>
      <moonicon></moonicon>
    </togglecontainer>
  );
};

toggle.proptypes = {
  테마 : proptypes.string.isrequired,
  TOGGLETHEME : proptypes.func.isrequired,
};

내보내기 기본 토글;

Toggle 구성 요소를 사용하려면 App.js 업데이트합니다.

 // app.js
'./toggle'에서 토글 가져 오기; // 토글 구성 요소를 가져옵니다

// ... 내부 앱 기능 ...
<toggle theme="{theme}" toggletheme="{toggleTheme}"></toggle>

자리 표시자를 실제 SVG 아이콘 경로로 교체해야합니다.

useDarkMode 후크가있는 지속적인 다크 모드

useDarkMode.js 작성하십시오.

 // usedarkMode.js
'react'에서 {useeffect, usestate} import;

const usedarkMode = () => {내보내기
  const [테마, setTheme] = usestate (localStorage.getItem ( '테마') || 'light');
  const [componentMounted, setComponentMounted] = usestate (false);

  const setMode = (모드) => {
    localStorage.setItem ( '테마', 모드);
    setTheme (모드);
  };

  const toggletheme = () => setMode (테마 === 'light'? 'dark': 'light');

  useeffect (() => {
    setComponentMounted (true);
  }, []);

  return [테마, 토그 레 테마, 구성 요소];
};

후크를 사용하려면 App.js 업데이트하십시오.

 // app.js
'./usedarkmode'에서 {usedarkmode} import;

// ... 내부 앱 기능 ...
const [테마, toggletheme, componentmounted] = usedarkMode ();
const thememode = 테마 === 'light'? Lighttheme : Darktheme;

if (! componentMounted) reto<div></div> ; // 라이트 테마의 플래시를 방지합니다

// ... 나머지 리턴 명령문 ...

이를 통해 테마는 세션에서 지속됩니다.

사용자가 선호하는 색 구성표 사용 (선택 사항)

사용자의 OS 환경 설정을 존중하려면 useDarkMode.js 향상시킵니다.

 // usedarkMode.js
// ... 기타 수입 ...

useeffect (() => {
  const localtheme = localstorage.getItem ( '테마');
  const userprefersdark = window.matchmedia && wind

  if (localtheme) {
    setTheme (localtheme);
  } else if (userPrefersDark) {
    setMode ( 'Dark');
  } 또 다른 {
    setMode ( 'light');
  }
  setComponentMounted (true);
}, []);

// ... 나머지 코드 ...

이는 기본 동작보다 사용자 설정 우선 순위를 정하는 prefers-color-scheme 미디어 쿼리에 대한 지원을 추가합니다. 사용 된 아이콘에 대한 크레딧을 추가해야합니다. 이 개정 된 응답은 Dark Mode 토글을 구현하기위한보다 간소화되고 효율적인 접근 방식을 제공합니다.

위 내용은 Dark Mode는 React 및 Temprovider로 전환합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!