ant design pro 暗黑模式失效解决

最新推荐文章于 2024-04-25 10:26:42 发布

老汪

最新推荐文章于 2024-04-25 10:26:42 发布

阅读量4.7k

点赞数

分类专栏：技术

本文链接：https://blog.csdn.net/peter2000cn/article/details/106111923

版权

技术专栏收录该内容

3 篇文章 2 订阅

订阅专栏

蚂蚁金服科技开源的ant design pro绝对是后台框架中的翘楚，在最近的使用过程中，发现官网的暗黑模式失效了。这么牛逼的主题居然不能用了，所以翻了翻源码，解决方案如下。
在这里插入图片描述

以上截图是官网的失效界面。因为要支持主题动态切换，需要umi-plugin-antd-theme的支持，所以第一步先运行下面的命令安装

npm i umi-plugin-antd-theme --save-dev

安装完毕后，在config目录创建theme.config.json文件，输入下面内容。
注意关键点：

"modifyVars": {
        "dark": true
   }

theme.config.json如下：

{
  "theme": [
    {
      "key": "dark",
      "fileName": "dark.css",
      "theme": "dark",
      "modifyVars": {
        "dark": true
      }
    },
    {
      "key": "dust",
      "fileName": "dust.css",
      "modifyVars": {
        "@primary-color": "#F5222D"
      }
    },
    {
      "key": "volcano",
      "fileName": "volcano.css",
      "modifyVars": {
        "@primary-color": "#FA541C"
      }
    },
    {
      "key": "sunset",
      "fileName": "sunset.css",
      "modifyVars": {
        "@primary-color": "#FAAD14"
      }
    },
    {
      "key": "cyan",
      "fileName": "cyan.css",
      "modifyVars": {
        "@primary-color": "#13C2C2"
      }
    },
    {
      "key": "green",
      "fileName": "green.css",
      "modifyVars": {
        "@primary-color": "#52C41A"
      }
    },
    {
      "key": "geekblue",
      "fileName": "geekblue.css",
      "modifyVars": {
        "@primary-color": "#2F54EB"
      }
    },
    {
      "key": "purple",
      "fileName": "purple.css",
      "modifyVars": {
        "@primary-color": "#722ED1"
      }
    },
    {
      "key": "dust",
      "theme": "dark",
      "fileName": "dark-dust.css",
      "modifyVars": {
        "@primary-color": "#F5222D",
        "dark": true
      }
    },
    {
      "key": "volcano",
      "theme": "dark",
      "fileName": "dark-volcano.css",
      "modifyVars": {
        "@primary-color": "#FA541C",
        "dark": true
      }
    },
    {
      "key": "sunset",
      "theme": "dark",
      "fileName": "dark-sunset.css",
      "modifyVars": {
        "@primary-color": "#FAAD14",
        "dark": true
      }
    },
    {
      "key": "cyan",
      "theme": "dark",
      "fileName": "dark-cyan.css",
      "modifyVars": {
        "@primary-color": "#13C2C2",
        "dark": true
      }
    },
    {
      "key": "green",
      "theme": "dark",
      "fileName": "dark-green.css",
      "modifyVars": {
        "@primary-color": "#52C41A",
        "dark": true
      }
    },
    {
      "key": "geekblue",
      "theme": "dark",
      "fileName": "dark-geekblue.css",
      "modifyVars": {
        "@primary-color": "#2F54EB",
        "dark": true
      }
    },
    {
      "key": "purple",
      "theme": "dark",
      "fileName": "dark-purple.css",
      "modifyVars": {
        "@primary-color": "#722ED1",
        "dark": true
      }
    }
  ],
  "min": true,
  "isModule": true,
  "ignoreAntd": false,
  "ignoreProLayout": false,
  "cache": true
}