[WIP] real dark

[chenshuai2144]

• add dark config
• new theme change function

[netlify]

Deploy preview for ant-design-pro ready!

Built with commit 5d40b45

https://deploy-preview-2946--ant-design-pro.netlify.com

[Anderson-Liu]

Hi! I try to design a dark mode's ant design pro dashboard and hope this can help.
And if your guys love this style, maybe we can improve it together.

What it now is(I known, it still work in progress):

After design:

[chenshuai2144]

@Anderson-Liu email?

[Anderson-Liu]

@chenshuai2144 andersion.v#gmail.com

[chenshuai2144]

andersion.v#gmail.com #?

[Anderson-Liu]

Please replace # to @ in andersion.v#gmail.com
Some crawler will find out all email format string in github and send junk email, so I replace @ to #.

[komorebi-san]

Hey @Anderson-Liu , hows PR coming? :)

[kaoding]

dark主题，这个怎么推进？

[chenshuai2144]

v4做完我就继续开工。这个还要推动 antd
antd 有个毒瘤。不好解决

[afc163]

这个主题直接落到 antd 的 themes 文件夹里吧。

[afc163]

这个还差什么？

[afc163]

https://github.com/ant-design/ant-design-dark-theme

[chenshuai2144]

#4356

[nuptcheng]

大佬们好，请问下我在既有的V2版本基础上使用dark主题，使用umi的方式引入后，出现Header和Footer没有背景色这种情况，想问下V2版本有解决方法么，V4版本我试了下，dark主题是完全可以的

[chenshuai2144]

@nuptcheng 需要设置 less 变量的

[yunsii]

总结一下。

1. 安装， npm install @ant-design/dark-theme -S
2. 引入， 在 /config/config.ts 中 import darkTheme from '@ant-design/dark-theme';
3. 使用

export default {
  // ...
  theme: {
    ...darkTheme,
  },
  // ...
}

[shuai4983958]

Cannot find module 'antd/dist/dark-theme'.
antd 3.x.x

[chenshuai2144]

you can use 1.x，2.x by antd@4

[cang9855]

大神，vue pro里怎么更改主题（风格），官方文档写的就两种，如果自己想改，或者想添加怎么做。实现线上动态切换

[Chenghui-web]

总结一下。

1. 安装， npm install @ant-design/dark-theme -S
2. 引入， 在 /config/config.ts 中 import darkTheme from '@ant-design/dark-theme';
3. 使用

export default {
  // ...
  theme: {
    ...darkTheme,
  },
  // ...
}

我没有/config/config.ts 这个文件 倒是有个theme.js 文件 我有点无从下手~ 拉的代码是夜莺的开源监控系统

[yunsii]

@Chenghui-web 都是 umi 的配置啊，而且现在官方有个正经的暗黑主题了，参考 ant-design/ant-design#23237 (comment) ，另外，如果你是 umi@3 的话可以直接通过配置开启的，这个 issue 里都有讨论的。

[yangzhenxi]

大佬们，现在vue pro怎么才能使用RealDark style主题呀！

[maido155]

总结一下。

1. 安装， npm install @ant-design/dark-theme -S
2. 引入， 在 /config/config.ts 中 import darkTheme from '@ant-design/dark-theme';
3. 使用

export default {
  // ...
  theme: {
    ...darkTheme,
  },
  // ...
}

great solution!

[yunsii]

@maido155 现在新版 antd 内置暗色主题了，难度你是使用的旧版？

[wuzhenda]

darkTheme is too dark.