如何使用 Antd 让我的网站尊重用户的深色模式设置？

Question

我了解如何以编程方式更改我的网站主题或使用 Antd 和 React 的状态，但是当浏览器根据以下内容自动更改模式时，如何尊重暗模式的用户设置，而无需重新加载网站以应用主题系统设置。

我的理解是，自从 Antd 5.x 迁移到 cssinjs 后，我不能再在 css 中使用主题颜色，所以 @media-query 不是一个选项，但我可能是错的。

Answer 1

就像一位评论者提到的那样，添加一个监听器来监听系统配色方案的变化。如果它发生变化，则更改

darkMode

状态，以便 React 可以重新评估并将其传播到

ConfigProvider

。

确保还包含另一个

useEffect

，以便在初始页面加载时对设置

darkMode

进行初始评估。

这是实现它的最小可行示例：

import React, { useEffect, useState, useCallback } from "react";
import { Button, ConfigProvider, Input, Space, theme } from "antd";

const App: React.FC = () => {
  const [darkMode, setDarkMode] = useState(false);
  const windowQuery = window.matchMedia("(prefers-color-scheme:dark)");

  const darkModeChange = useCallback((event: MediaQueryListEvent) => {
    console.log(event.matches ? true : false);
    setDarkMode(event.matches ? true : false);
  }, []);

  useEffect(() => {
    windowQuery.addEventListener("change", darkModeChange);
    return () => {
      windowQuery.removeEventListener("change", darkModeChange);
    };
  }, [windowQuery, darkModeChange]);

  useEffect(() => {
    console.log(windowQuery.matches ? true : false);
    setDarkMode(windowQuery.matches ? true : false);
  }, []);

  return (
    <ConfigProvider
      theme={{
        algorithm: darkMode ? theme.darkAlgorithm : theme.compactAlgorithm
      }}
    >
      <Space>
        <Input placeholder="Please Input" />
        <Button type="primary">Submit</Button>
      </Space>
    </ConfigProvider>
  );
};

export default App;

演示

Answer 2

你可以使用

const windowQuery = window.matchMedia("(首选颜色方案：深色)");

const [darkMode, setDarkMode] = useState(windowQuery.matches);

并删除最后一个 useEffect(..., [])