Ant-design-pro: 黑色主题怎么使用？🧐[问题]

Created on 15 Dec 2019  ·  36Comments  ·  Source: ant-design/ant-design-pro

🧐 问题描述

https://pro.ant.design/blog/dynamic-theme-cn#header
官方文档中和预览中使用的dark主题怎么没有啊？

💻 示例代码

🚑 其他信息

🕵🏻‍♀️ question 😸Documentation
Source
picture lattemj

Most helpful comment

总结一下。

  1. 安装， npm install @ant-design/dark-theme -S
  2. 引入， 在 /config/config.ts 中 import darkTheme from '@ant-design/dark-theme';
  3. 使用
export default {
  // ...
  theme: {
    ...darkTheme,
  },
  // ...
}
picture theprimone on 10 Feb 2020
👍3

All 36 comments

https://pro.ant.design/docs/dynamic-theme-cn
这个里面有文档

chenshuai2144 picture chenshuai2144 on 15 Dec 2019

https://pro.ant.design/docs/dynamic-theme-cn
这个里面有文档

image
这个主题按文档操作完就有了？

lattemj picture lattemj on 15 Dec 2019

对，插件加上去就自动有了

chenshuai2144 picture chenshuai2144 on 15 Dec 2019

对，插件加上去就自动有了

谢谢大佬，现在有了，另外还想请教一下如何不使用“SettingDrawer”设置默认主题

lattemj picture lattemj on 15 Dec 2019

https://pro.ant.design/docs/dynamic-theme-cn#%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2

看看这个

chenshuai2144 picture chenshuai2144 on 15 Dec 2019

解决了在不使用SettingDrawer情况下设置默认themePluginConfig中的主题：
config.ts中 plugins.push(['umi-plugin-antd-theme', themePluginConfig]); 让这段代码执行，这样才会在运行时打包css文件，官方文档中已经说了会生成theme/**.css文件，这时只要在适合的位置加载打包后的css文件即可，上面大佬有提到，改一下代码就可以了。

lattemj picture lattemj on 15 Dec 2019

https://pro.ant.design/docs/dynamic-theme-cn#%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2

这个文档好复杂啊，按道理应该是在 SettingDrawer 里配置好，拷贝代码到这里就能生效。

图片

拷贝出来的代码是这样的。

图片

afc163 picture afc163 on 15 Dec 2019

拷贝出来的代码是这样的，是不是这样写不能

我一开始也以为在这里配置，实际上不是，这里的navTheme只是menu的Theme，你在BasicLayout里面加入下面这段代码就可以了，我根据文档改了一下。
`/**

  • constructor
    */
    let styleLink = document.getElementById("theme-style");
    let body = document.getElementsByTagName('body')[0];
    if (styleLink) { // 假如存在id为theme-style 的link标签，直接修改其href
    styleLink.href = '/theme/dark.css'; // 切换 antd 组件主题
    // body.className = "body-warp-theme1"; // 切换自定义组件的主题
    } else { // 不存在的话，则新建一个
    styleLink = document.createElement('link');
    styleLink.type = 'text/css';
    styleLink.rel = 'stylesheet';
    styleLink.id = 'theme-style';
    styleLink.href = '/theme/dark.css';
    document.body.append(styleLink);
    }`
lattemj picture lattemj on 15 Dec 2019

https://pro.ant.design/docs/dynamic-theme-cn#%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2

这个文档提到是动态切换主题的能力，不是如何使用黑色主题，@chenshuai2144 的回答是误导的。

afc163 picture afc163 on 15 Dec 2019

我一开始也以为在这里配置，实际上不是，这里的navTheme只是menu的Theme，你在BasicLayout里面加入下面这段代码就可以了，我根据文档改了一下。

这段代码要加到 pro 源码里去，根据 navTheme 的配置自动启用。@chenshuai2144

afc163 picture afc163 on 15 Dec 2019

我一开始也以为在这里配置，实际上不是，这里的navTheme只是menu的主题，你在BasicLayout里面加入下面的代码就可以了，我根据文档改了一下。

这段代码要加到pro原始代码里去，根据navTheme的配置自动启用。@ chenshuai2144

以现在pro项目架构来看，估计不会以主题为主，还是提供自定义的框架让开发者自行完成，其实只需要两步就完成了，如下：

  1. config.ts中plugins.push（['umi-plugin-antd-theme'，themePluginConfig]）; 让这段代码执行
  2. 在BasicLayout中加入下面这段代码
    /**

    • constructor

      */

      let styleLink = document.getElementById（“ theme-style”）;

      让body = document.getElementsByTagName（'body'）[0];

      if（styleLink）{//假设存在为主题样式的链接标签，直接修改其href

      styleLink.href ='/theme/dark.css'; //切换antd组件主题

      // body.className =“ body-warp-theme1”; // //切换自定义组件的主题

      } else {//不存在的话，则新建一个

      styleLink = document.createElement（'link'）;

      styleLink.type ='text / css';

      styleLink.rel ='样式表';

      styleLink.id ='主题风格';

      styleLink.href ='/theme/dark.css';

      document.body.append（styleLink）;

      }

lattemj picture lattemj on 15 Dec 2019

不对这段代码也是为了动态切换，如果只是单纯使用 dark 主题（不切换），不用写成这个样子。

afc163 picture afc163 on 15 Dec 2019

不对这段代码也是为了动态切换，如果只是单纯使用 dark 主题（不切换），不用写成这个样式。

这是目前我的解决方案，不是动态切换的话那得覆盖样式了 -_-!!!!

lattemj picture lattemj on 15 Dec 2019

如果不想切换，只想默认的话，可以直接设置 config.ts 中的 theme。

chenshuai2144 picture chenshuai2144 on 15 Dec 2019
👍3

想要默认用官方的黑色主题应该是在defaultSettings加如对应的主题名就行吧？但是好像黑色主题最近才有的？不知道具体叫什么名字和如何配置。

near68 picture near68 on 15 Dec 2019

https://github.com/ant-design/ant-design-pro/issues/5757#issuecomment-565811259

试一下。如果不行就是我们代码有问题。

afc163 picture afc163 on 15 Dec 2019

这段代码要加到 pro 源码里去，根据 navTheme 的配置自动启用。@chenshuai2144

SettingDrawer 中 有这个代码，根据 setting 种的 theme 配置自动去加载

chenshuai2144 picture chenshuai2144 on 16 Dec 2019

在V4版本下 ~

config.ts

plugins = [
// 增加了这段
['umi-plugin-antd-theme',themePluginConfig] 
]

themePluginConfig.ts

export default {
  theme: [
    {
      fileName: 'green.css',
      key: 'green',
      modifyVars: {
        '@primary-color': '#19D49A',
      },
    },
    {
      fileName: 'blue.css',
      key: 'blue',
      modifyVars: {
        '@primary-color': '#366ffe',
      },
    },
    {
      key: 'dark',
      fileName: 'dark.css',
      theme: 'dark',
    },
  ],
};

global.less

.body-wrap-blue {
  // theme1下的全局变量在此定义
  --font-color: #000000;
  --bg-color: #011313;
}

.body-wrap-green {
  // theme2下的全局变量在此定义
  --font-color: #ffffff;
  --bg-color: #ffffff;
}

切换的 OnClick事件:

 let styleLink = document.getElementById("theme-style");
                let body = document.getElementsByTagName('body')[0];
                if (styleLink) { // 假如存在id为theme-style 的link标签，直接修改其href
                  if (this.theme1) {
                    styleLink.href = '/theme/green.css';  // 切换 ant design 组件主题
                    body.className = "body-wrap-green";  // 切换自定义组件的主题
                  } else {
                    styleLink.href = '/theme/blue.css';
                    body.className = "body-wrap-blue";
                  }
                  this.theme1 = !this.theme1;
                } else { // 不存在的话，则新建一个
                  styleLink = document.createElement('link');
                  styleLink.type = 'text/css';
                  styleLink.rel = 'stylesheet';
                  styleLink.id = 'theme-style';
                  if (this.theme1) {
                    styleLink.href = '/theme/green.css';
                    body.className = "body-wrap-green";
                  } else {
                    styleLink.href = '/theme/blue.css';
                    body.className = "body-wrap-blue";
                  }
                  this.theme1 = !this.theme1;
                  document.body.append(styleLink);
                }

输出的日志:

i  info      cache in /node_modules/.plugin-theme
[ ]  pending   build theme
{ [Error: .info is undefined]
  message: '.info is undefined',
  stack: undefined,
  type: 'Name',
  filename:
   '\node_modules\\antd-pro-merge-less\\.temp\\pro.less',
  index: 10021,
  line: 426,
  column: 4,
  callLine: NaN,
  callExtract: undefined,
  extract:
   [ '  .antd-pro-pages-resume-management-index-expect_info {',
     '    .info',
     '  }' ] }
{ [Error: .info is undefined]
  message: '.info is undefined',
  stack: undefined,
  type: 'Name',
  filename:
   \node_modules\\antd-pro-merge-less\\.temp\\pro.less',
  index: 10021,
  line: 426,
  column: 4,
  callLine: NaN,
  callExtract: undefined,
  extract:
   [ '  .antd-pro-pages-resume-management-index-expect_info {',
     '    .info',
     '  }' ] }
{ [Error: .info is undefined]
  message: '.info is undefined',
  stack: undefined,
  type: 'Name',
  filename:
   '\node_modules\\antd-pro-merge-less\\.temp\\pro.less',
  index: 10021,
  line: 426,
  column: 4,
  callLine: NaN,
  callExtract: undefined,
  extract:
   [ '  .antd-pro-pages-resume-management-index-expect_info {',
     '    .info',
     '  }' ] }
√  success    build theme success

然后加载的 css/theme-colors.css 文件, 返回是一个 html , 而不是 css , 切换并没有生效

请问哪个环节出问题了 ??? i need to help @chenshuai2144 @afc163

xoptimal picture xoptimal on 18 Dec 2019

在V4版本下 ~

config.ts

plugins = [
// 增加了这段
['umi-plugin-antd-theme',themePluginConfig] 
]

themePluginConfig.ts

export default {
  theme: [
    {
      fileName: 'green.css',
      key: 'green',
      modifyVars: {
        '@primary-color': '#19D49A',
      },
    },
    {
      fileName: 'blue.css',
      key: 'blue',
      modifyVars: {
        '@primary-color': '#366ffe',
      },
    },
    {
      key: 'dark',
      fileName: 'dark.css',
      theme: 'dark',
    },
  ],
};

global.less

.body-wrap-blue {
  // theme1下的全局变量在此定义
  --font-color: #000000;
  --bg-color: #011313;
}

.body-wrap-green {
  // theme2下的全局变量在此定义
  --font-color: #ffffff;
  --bg-color: #ffffff;
}

切换的 OnClick事件:

 let styleLink = document.getElementById("theme-style");
                let body = document.getElementsByTagName('body')[0];
                if (styleLink) { // 假如存在id为theme-style 的link标签，直接修改其href
                  if (this.theme1) {
                    styleLink.href = '/theme/green.css';  // 切换 ant design 组件主题
                    body.className = "body-wrap-green";  // 切换自定义组件的主题
                  } else {
                    styleLink.href = '/theme/blue.css';
                    body.className = "body-wrap-blue";
                  }
                  this.theme1 = !this.theme1;
                } else { // 不存在的话，则新建一个
                  styleLink = document.createElement('link');
                  styleLink.type = 'text/css';
                  styleLink.rel = 'stylesheet';
                  styleLink.id = 'theme-style';
                  if (this.theme1) {
                    styleLink.href = '/theme/green.css';
                    body.className = "body-wrap-green";
                  } else {
                    styleLink.href = '/theme/blue.css';
                    body.className = "body-wrap-blue";
                  }
                  this.theme1 = !this.theme1;
                  document.body.append(styleLink);
                }

输出的日志:

i  info      cache in /node_modules/.plugin-theme
[ ]  pending   build theme
{ [Error: .info is undefined]
  message: '.info is undefined',
  stack: undefined,
  type: 'Name',
  filename:
   '\node_modules\\antd-pro-merge-less\\.temp\\pro.less',
  index: 10021,
  line: 426,
  column: 4,
  callLine: NaN,
  callExtract: undefined,
  extract:
   [ '  .antd-pro-pages-resume-management-index-expect_info {',
     '    .info',
     '  }' ] }
{ [Error: .info is undefined]
  message: '.info is undefined',
  stack: undefined,
  type: 'Name',
  filename:
   \node_modules\\antd-pro-merge-less\\.temp\\pro.less',
  index: 10021,
  line: 426,
  column: 4,
  callLine: NaN,
  callExtract: undefined,
  extract:
   [ '  .antd-pro-pages-resume-management-index-expect_info {',
     '    .info',
     '  }' ] }
{ [Error: .info is undefined]
  message: '.info is undefined',
  stack: undefined,
  type: 'Name',
  filename:
   '\node_modules\\antd-pro-merge-less\\.temp\\pro.less',
  index: 10021,
  line: 426,
  column: 4,
  callLine: NaN,
  callExtract: undefined,
  extract:
   [ '  .antd-pro-pages-resume-management-index-expect_info {',
     '    .info',
     '  }' ] }
√  success    build theme success

然后加载的 css/theme-colors.css 文件, 返回是一个 html , 而不是 css , 切换并没有生效

请问哪个环节出问题了 ??? i need to help @chenshuai2144 @afc163

这只是一个示例，里面的样式文件并不存在，你按上面的方法弄一下就可以了

lattemj picture lattemj on 18 Dec 2019

@lattemj 你指的上面的方法, 具体怎么操作 ~

xoptimal picture xoptimal on 18 Dec 2019

preview.pro.ant.design 下的主题切换正常 , master 下载的项目 , 开启切换有异常, 能提供下比较完备的实现方案吗 , 头疼 ~ @chenshuai2144

xoptimal picture xoptimal on 19 Dec 2019

@xoptimal 详细描述一下你的异常？

chenshuai2144 picture chenshuai2144 on 19 Dec 2019

我项目的异常已经贴在上面了, 劳烦你往上翻翻 ~ 至于 pro -> master 分支下的异常, 直接done install 切换即可复现 ~ @chenshuai2144

xoptimal picture xoptimal on 19 Dec 2019

https://www.cnblogs.com/dygood/p/12072096.html
可以看一下我这个文章,里边有描述如何使用黑色主题.以及在生产环境由用户自己切换主题.

joesdu picture joesdu on 20 Dec 2019

@xoptimal 看起来是你的 less写的有问题，less 编译不了了

chenshuai2144 picture chenshuai2144 on 20 Dec 2019

@xoptimal 看起来是你的 less写的有问题，less 编译不了了

已经解决 ~

xoptimal picture xoptimal on 20 Dec 2019

总结一下。

  1. 安装， npm install @ant-design/dark-theme -S
  2. 引入， 在 /config/config.ts 中 import darkTheme from '@ant-design/dark-theme';
  3. 使用
export default {
  // ...
  theme: {
    ...darkTheme,
  },
  // ...
}
theprimone picture theprimone on 10 Feb 2020
👍3

总结一下。

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

请问如何动态切换，就像antd@4官网中那种，light和dark相互切换

TianenPang picture TianenPang on 12 Feb 2020

动态切换的话，参考 umi-plugin-antd-theme 和 主题切换 应该就行了。

theprimone picture theprimone on 12 Feb 2020

动态切换的话，参考 umi-plugin-antd-theme 和 主题切换 应该就行了。

  • 左侧菜单的主题颜色并没有改变，请问您那边解决了嘛？（而且黑色主题的颜色也不对）

  • Demo
    批注 2020-02-13 030112

  • Ant Design Pro
    A_mYU9R4YFxscAAAAAAAAAAABkARQnAQ
TianenPang picture TianenPang on 12 Feb 2020

@TianEnPang 你第二张图的截图哪儿来的？现在预览的页面也是没变啊

theprimone picture theprimone on 13 Feb 2020

@TianEnPang 你第二张图的截图哪儿来的？现在预览的页面也是没变啊

antd@4 文档

Preview dark theme

TianenPang picture TianenPang on 13 Feb 2020

看了下文档，换了个思路，使用 umi-plugin-antd-theme 和 import defaultDarkTheme from 'antd/dist/dark-theme'; 即可实现，参考 https://github.com/theprimone/ant-design-pro-plus/blob/master/config/themePluginConfig.ts#L59

由于 SettingDrawer 扩展性不强，这个黑暗模式只有在配置的那种情况才会出现。如果仿照 SettingDrawer 自定义一个切换主题的组件的话，应该就完美了。

ps ，折腾了好久， realDark 生成的默认暗色主题样式文件 dark.css 应该是这里 https://github.com/chenshuai2144/merge-cssMoudle-less/blob/master/index.js#L12 生成的，通过 umi-plugin-antd-theme 调用。心里的石头终于落地了，该睡了 _(:3J∠)_

theprimone picture theprimone on 13 Feb 2020
❤1

看了下文档，换了个思路，使用 umi-plugin-antd-theme 和 import defaultDarkTheme from 'antd/dist/dark-theme'; 即可实现，参考 https://github.com/theprimone/ant-design-pro-plus/blob/master/config/themePluginConfig.ts#L59

由于 SettingDrawer 扩展性不强，这个黑暗模式只有在配置的那种情况才会出现。如果仿照 SettingDrawer 自定义一个切换主题的组件的话，应该就完美了。

ps ，折腾了好久， realDark 生成的默认暗色主题样式文件 dark.css 应该是这里 https://github.com/chenshuai2144/merge-cssMoudle-less/blob/master/index.js#L12 生成的，通过 umi-plugin-antd-theme 调用。心里的石头终于落地了，该睡了 _(:3J∠)_

感谢！感谢！我明天再按照你说的试试，我昨天一直没有成功
ps：我就是想自己做一个类似 SettingDrawer 主题切换组件。主要切换白天夜晚和主题色。
如果不成功的话还希望麻烦老哥指导下。

TianenPang picture TianenPang on 13 Feb 2020

对，插件加上去就自动有了

想请教一下，只是在页面引入了单个ant控件，插件加进去之后，能自动开启这个控件的深色模式么？

7Charlotte picture 7Charlotte on 6 May 2020

对，插件加上去就自动有了

想请教一下，只是在页面引入了单个ant控件，插件加进去之后，能自动开启这个控件的深色模式么？

进入了umi@3时代这已经超级简单了😀

joesdu picture joesdu on 6 May 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

kaoding picture kaoding  ·  3Comments
ghost picture ghost  ·  3Comments
lvzheng0404 picture lvzheng0404  ·  3Comments
renyi818 picture renyi818  ·  3Comments
RichardStark picture RichardStark  ·  3Comments