-
What problem does this feature solve?The instruction in this page https://ng.ant.design/docs/customize-theme/en#switch-theming is not clear, it would be great if you provide a "stackblitz" example. What does the proposed API look like?There are 2 separate pieces of code provided in https://ng.ant.design/docs/customize-theme/en#switch-theming , but I have no idea what should be the file name, where should it be placed? How and when should it be called? It will be great if you update that page with an example of doing that on stackblitz |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 3 replies
-
https://stackoverflow.com/questions/61901234/how-to-change-the-ng-zorro-theme-at-runtime |
Beta Was this translation helpful? Give feedback.
-
Here is the enterprise-grade professional way of doing it using css variables |
Beta Was this translation helpful? Give feedback.
-
const less = require("less");
const LessPluginCleanCSS = require("less-plugin-clean-css");
const LessPluginNpmImport = require("less-plugin-npm-import");
const fs = require("fs");
const darkThemeVars = require("ng-zorro-antd/compact-theme");
const compactThemeVars = require("ng-zorro-antd/dark-theme");
const appStyles = "src/assets/styles/zorro.less"; // 应用的样式入口文件 style entry path for the application
const themeContent = `@import '${appStyles}';`;
function gen(type) {
return less
.render(themeContent, {
javascriptEnabled: true,
plugins: [
new LessPluginNpmImport({ prefix: "~" }),
new LessPluginCleanCSS({ advanced: true }),
],
modifyVars: {
...(type === "dark" ? darkThemeVars : compactThemeVars),
},
})
.then((data) => {
fs.writeFileSync(
// 主题样式的输出文件 output path for the theme style
`src/assets/themes/style.${type}.css`,
data.css
);
})
.catch((e) => {
// 记录渲染错误 log the render error
console.error(type, e);
});
}
Promise.all([gen("dark"), gen("compact")]).then(() => {
console.log("Success!");
});
tips
|
Beta Was this translation helpful? Give feedback.
-
what I would suggest is creating classes with the nested imports and adding/removing said theme classes from the document body like so:
|
Beta Was this translation helpful? Give feedback.
-
The easier way could be just to create two theme files e.g.
Now you just have to apply the |
Beta Was this translation helpful? Give feedback.
Here is the enterprise-grade professional way of doing it using css variables
https://stackblitz.com/edit/dark-mode-with-angular-and-css-variables-4bjhu3