사용자 위젯의 밝은 테마와 어두운 테마

위젯은 부모 앱의 color-scheme을 prefers-color-scheme media query로 감지하여 스타일을 바꿀 수 있습니다.

.container {
  background: white;
}
@media (prefers-color-scheme: dark) {
  .container {
    background: black;
  }
}

JavaScript에서도 window.matchMedia로 감지할 수 있습니다. 이 값은 UI 라이브러리의 테마 설정에 전달하거나 위젯의 표시를 바꾸는 데 사용합니다.

import { useEffect, useState } from "react";

const useMediaQuery = (query: string) => {
  const [matches, setMatches] = useState(false);
  useEffect(() => {
    const mediaQueryList = window.matchMedia(query);
    const handleChange = (event: MediaQueryListEvent) => setMatches(event.matches);
    setMatches(mediaQueryList.matches);
    mediaQueryList.addEventListener("change", handleChange);
    return () => mediaQueryList.removeEventListener("change", handleChange);
  }, [query]);
  return matches;
};

const useDarkTheme = () => useMediaQuery("(prefers-color-scheme: dark)");

export const Component = () => {
  const isDarkTheme = useDarkTheme();
  return (
    <div className="container" style={{ color: isDarkTheme ? "white" : "black" }}>
      {isDarkTheme ? "Dark theme" : "Light theme"}
    </div>
  );
};

현재값을 읽은 뒤 change 이벤트를 구독하고, query가 바뀌거나 컴포넌트가 제거되면 같은 처리기를 해제합니다. 위 CSS와 컴포넌트를 함께 적용하면 부모 테마에 맞춰 배경과 글자색을 표시합니다.