Antd theme.defaultAlgorithm 失效求助：页面始终处于暗黑模式

原因分析 #

Antd v5 默认启用了系统主题自动适配特性，即使你在ConfigProvider中指定了theme.defaultAlgorithm（浅色主题算法），框架依然会自动生成适配prefers-color-scheme: dark的媒体查询样式并注入页面。这是因为Antd默认会同时生成浅色、深色两套CSS变量，通过系统颜色偏好自动切换——你的defaultAlgorithm配置仅设置了默认主题，但未关闭这套自动适配逻辑。

解决方案 #

1. 完全禁用系统主题适配（推荐）

在ConfigProvider的theme配置中添加preferColorScheme: 'light'，明确告诉框架优先使用浅色主题，且不生成暗黑模式的媒体查询样式：

import { ConfigProvider, theme } from 'antd';

function App() {
  return (
    <ConfigProvider
      theme={{
        algorithm: theme.defaultAlgorithm,
        preferColorScheme: 'light', // 关键配置，关闭系统深色适配
      }}
    >
      {/* 你的应用内容 */}
    </ConfigProvider>
  );
}

export default App;

2. 检查静态样式引入

如果项目中单独引入了antd/dist/reset.css这类静态样式文件，其中也包含暗黑模式的媒体查询规则。此时应移除该静态引入，改用ConfigProvider自动注入的动态样式（Antd v5推荐方式）。

3. 全局样式强制覆盖（兜底方案）

若仍有残留暗黑样式，可在全局CSS中强制覆盖媒体查询规则：

@media (prefers-color-scheme: dark) {
  :root {
    /* 重置为浅色主题的CSS变量，示例如下 */
    --ant-primary-color: #165DFF;
    --ant-primary-hover-color: #4080FF;
    --ant-bg-color: #ffffff;
    --ant-text-color: #141414;
    /* 其余变量可参考Antd浅色主题默认值补充 */
  }
}

内容的提问来源于stack exchange，提问作者J_P