nz-zorro 主题切换动态

最新推荐文章于 2026-02-24 03:49:52 发布

原创

最新推荐文章于 2026-02-24 03:49:52 发布 · 1.3k 阅读

标签

#js #angular #主题

收录于

本文介绍了如何在Angular应用中实现在不重新加载应用的情况下动态切换主题，包括安装相关依赖，编写生成不同主题CSS文件的脚本，以及在运行时切换主题的详细步骤。关键在于确保主题相关样式在全局样式中，以便于覆盖组件样式。

主题切换

当使用 @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 = 'path/src/styles.less'; // 应用的样式入口文件
const themeContent = `@import 'https://blog.csdn.net/$%7BappStyles%7D';`;

function gen(type)
{
    return less.render(themeContent, {
  javascriptEnabled: true,
  plugins: [ne