Dark theme support（深色主题支持）

Custom widgets can use the prefers-color-scheme ↗ CSS media feature to detect the color-scheme ↗ of the parent application and apply appropriate styles.

.container {
    background: white;
}

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

Additionally, the window.matchMedia() ↗ method can be used to detect the color scheme from JavaScript, for example to apply a theme to a component library.

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;
};

---

中文翻译

深色主题支持

自定义组件（Custom widgets）可利用 CSS 媒体特性 prefers-color-scheme ↗ 检测父应用的 color-scheme ↗，并应用相应的样式。

.container {
    background: white;
}

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

此外，还可通过 JavaScript 的 window.matchMedia() ↗ 方法检测配色方案，例如为组件库（component library）应用主题。

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;
};