React에서 선호하는 색 구성표

즉석에서 사용자 테마를 밝은 색에서 어두운 색으로 바꿀 수 있는 데모가 있습니다. 또한 'dark' 또는 'light' 선택 항목을 localStorage에 저장하고 다음 사용자 방문 시 테마를 설정할 때 먼저 확인하여 사람이 마지막으로 선택한 선택 항목을 기억합니다.

이것은 훌륭하지만 iOS, Windows 10, Android 등의 사용자는 선호하는 테마를 설정할 수 있습니다. 다음은 Windows 10 컴퓨터에서 수행할 수 있는 방법입니다.

CSS에서 이 값을 읽는 방법(미디어 쿼리)

Dev Community에서 이 게시물을 읽고 있었는데 prefers-color-scheme 미디어 쿼리를 사용하는 방법에 대해 설명합니다.

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}

그리고 이것은 저를 생각하게 했습니다. 나는 이미 응용 프로그램에서 사용자 입력(스위치) 또는 내가 localStorage에 저장한 마지막 기본 선택 항목에 따라 테마를 교체하는 작업을 완료했습니다.

그러나 localStorage에서 또는 그와 관련하여 선호하는 테마를 찾기 전에 장치의 선호하는 색 구성표에 대해 문의해야 합니다. 위에 표시된 CSS에서만 이 작업을 수행하는 방법을 알고 있기 때문에 JS에서 매우 해커적인 것을 작성하고 싶지 않습니다. React Hooks로 이 작업을 수행하는 방법에 대한 좋은 아이디어를 제공하는 문서How to detect a user’s preferred color scheme in JavaScript를 찾았습니다.

React Hook을 사용하여 JS에서 이 값을 읽는 방법

위 기사에서 "Reactive JS Approach"이라는 섹션은 JavaScript의 watchMedia() 메소드 사용에 대한 더 나은 아이디어를 제공했습니다. 이것은 훌륭하지만 저는 이미 프로젝트에서 watchMedia() 메서드를 래핑하고 이를 React Hook으로 노출하는 React Hook을 사용하고 있습니다.

이 라이브러리는 react-media-hook라고 하며 다음과 같이 사용할 수 있습니다.

import { useMediaPredicate } from "react-media-hook";
let breakpoint = useMediaPredicate("(min-width: 600px)") ? "medium" : "small";

사실 이것이 바로 내 'small' 대 'medium' 중단점을 확인하는 데 사용하는 방법입니다. 그러나 min-width 쿼리를 전달하는 대신 prefers-color-scheme 쿼리를 전달할 수 있습니다.

const preferredTheme = useMediaPredicate("(prefers-color-scheme: dark)") ? "dark" : "light";

이를 통해 기기에서 'dark'와 'light'를 선호하는지 쉽게 알 수 있습니다. 이 값을 문자열 또는 부울 값으로 유지할 수 있으며 이제 몇 줄의 JS로 내 앱에서 쉽게 확인할 수 있습니다.

아래는 내 테마 설정의 초기 첫 번째 찌르기입니다. React ContextAPI 및 Hooks를 사용하여 이 값을 전역적으로 설정합니다.

import React, { useState, useEffect, createContext } from 'react';
import { useMediaPredicate } from "react-media-hook";

const AppContext = createContext();

const AppProvider = props => {
  const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'dark' : 'light'
  const [appData, setApp] = useState({

    navOpen: false,
    toggleSidenav: value => setApp(data => (
      { ...data, navOpen: value }
    )),

    themeMode: localStorage.getItem(''kr-todo-theme') || preferredTheme,
    changeTheme: mode => setApp(data => (
      {...data, themeMode: mode }
    )),

  });

  useEffect(() => {
    localStorage.setItem(''kr-todo-theme', appData.themeMode)
    }, [appData.themeMode]
  );

  return <AppContext.Provider value={appData}>{props.children}</AppContext.Provider>
}

export { AppContext, AppProvider };

이 작업을 보여주기 위해 사용자가 localStorage에서 설정을 제거하여 처음으로 내 앱을 실행하는 것을 시뮬레이션할 수 있습니다. 이렇게 하면 내 코드가 선호하는 테마를 확인하고 초기 테마 설정을 기본으로 합니다'dark' 선호하는 경우 그렇지 않은 경우 'light' .



또한 마지막으로 저장된 테마 환경 설정을 기억합니다. 그래서 나는 prefers-color-scheme를 그들이 선호한다고 알려주는 사용자 설정이 없는 한 내가 무엇을 사용해야 하는지에 대한 표시로 사용하는 아이디어를 좋아합니다.

이 기사가 마음에 드셨기를 바라며 Kendo UI Sass theme Builder 및 KendoReact Components 과 함께 작동하는 전체 데모 응용 프로그램을 보려면 여기에서 얻을 수 있습니다: GitHub.com/httpJunkie/kr-todo-hooks . 암스테르담에서 데모로 사용한 것과 동일한 애플리케이션입니다.

또한 React Hooks로 작업하는 방법에 대한 철저한 문서도 있습니다. 나는 State and Effects , Context , Reducers , Custom Hooks 및 Managing Control State of Components 으로 넘어갑니다.