主题切换
当使用 @angular/cli 的方式配置主题时必须为每个主题单独打包应用,当你想切换主题而不重新加载应用时(就像这个网站),你可以使用下面的方法将主题编译到单独的样式文件,并在运行时切换:
注意:确保与主题变量相关的样式存在全局样式中,而不是组件样式中,因为组件样式优先级更高将会导致样式无法被覆盖。
1、安装依赖 用于将暗黑模式的less转为css文件,便于动态切换
npm i less -D less-plugin-clean-css -D
2、编写生成可切换为暗黑模式的css文件的脚本
以黑暗主题为例,使用 less
编译应用的样式入口文件,并且在 modifyVars
参数中替换样式变量,并输出到目标位置。
在目录下创建theme.js文件,然后拷贝如下代码,代码中的path需要修改为,项目的路径,可以是相对路径,不过我用的绝对路径,主要是图省事。 在命令行输入: node .\theme.js,运行即可生成暗黑模式的css文件。
const less = require('less');
const LessPluginCleanCSS = require('less-plugin-clean-css');
const fs = require('fs');
const darkThemeVars = require('ng-zorro-antd/dark-theme');
const appStyles &