🧐[问题 | 新项目navTheme 修改位dark 和primaryColor不起作用

[zhangXiaolizi]

🧐 问题描述 | Problem description

1、yarn create umi my-app 2、选择 Ant Design Pro 3、添加defaultSetting，包含navTheme ， layout 和 primaryColor （见下图） 4、在app.ts中进行设置

但是页面没有黑色模式的任何效果

💻 示例代码 | Sample code

import { Settings as LayoutSettings } from "@ant-design/pro-components";

const settings: LayoutSettings & { pwa?: boolean; logo?: string; } = { navTheme: 'dark', // 拂晓蓝 primaryColor: '#1890ff', layout: 'top', contentWidth: 'Fluid', fixedHeader: false, fixSiderbar: false, colorWeak: false, title: '管理后台', pwa: false, logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', iconfontUrl: '', };

export default settings;

import routes from 'config/routes'; import defaultSetting from '../config/defaultSetting' // 运行时配置

// 全局初始化数据配置，用于 Layout 用户信息和权限初始化 // 更多信息见文档：https://next.umijs.org/docs/api/runtime-config#getinitialstate export async function getInitialState(): Promise<{ name: string }> { return { name: '管理员' }; }

export const layout = () => {

return { //logo地址 logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg', logout: (state: any) =>{ console.log(state); }, ...defaultSetting }; };

🚑 其他信息 | Other information

OS: mac Node： v16.16.0 浏览器 | browser： chrome v16.16.0

[mushroomlb]

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
      layout:'top',
       ...
  }
}

[github-actions[bot]]

Hello @zhangXiaolizi. Please provide a online reproduction by forking this link https://codesandbox.io/ or a minimal GitHub repository.

你好 @zhangXiaolizi, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。

[kokman]

我也遇到同样的问题，请问解决了吗？谢谢！

[huangfenglan]

请问解决了吗？我也遇到了相同的问题

[hfpp2012copy]

不是 dark 是 readDark https://www.qiuzhi99.com/playlists/antdprov5latest.html

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

感谢您提供解决方案。确实，在 Ant Design Pro 5 中，不是使用 'dark' 的值来设置暗黑主题，而是使用 'realDark'。所以可以尝试在设置中将 'navTheme' 的值改为 'realDark'，如下所示：

const settings: LayoutSettings & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: 'realDark',
  primaryColor: '#1890ff',
  layout: 'top',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: false,
  colorWeak: false,
  title: '管理后台',
  pwa: false,
  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
  iconfontUrl: '',
};

export default settings;

此外，也可以查看 pro-components 的官方文档来了解更多有关设置的信息：

https://procomponents.ant.design/components/layout-cn/