ダークテーマのサポート

カスタムウィジェットでは、prefers-color-scheme ↗ CSS メディア機能を使用して、親アプリケーションの color-scheme ↗ を検出し、適切なスタイルを適用できます。

Copied!
1
2
3
4
5
6
7
8
9
.container {
    background: white;
}

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

また、window.matchMedia() ↗ メソッドを使用すると、JavaScript から配色を検出できます。たとえば、コンポーネントライブラリにテーマを適用するために使用できます。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const Component: React.FC = () => {
    const isDarkTheme = useDarkTheme();
    return <Theme appearance={isDarkTheme ? "dark" : "light"}>...</Theme>;
};

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

const useMediaQuery = (query: string) => {
    const [matches, setMatches] = useState(false);

    const handleChange = (e: MediaQueryListEvent) => setMatches(e.matches);

    useEffect(() => {
        const mediaQueryList = window.matchMedia(query);
        setMatches(mediaQueryList.matches);
        mediaQueryList.addEventListener("change", handleChange);
        return () => {
            mediaQueryList.removeEventListener("change", handleChange);
        };
    }, [query]);

    return matches;
};