- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我做了很多研究,但找不到生成 ng-zorro 主题并在运行时更改它的方法。
最后,我找到了一种方法来做到这一点。
最佳答案
演示: https://ashotaleqs.github.io/ng-zorro-switch-theme/
首先你需要安装less-plugin-clean-css
命令的开发依赖 npm i less -D less-plugin-clean-css -D
创建 themes
assets
中的文件夹文件夹
定义 less-compiler.js
其中包含:
const less = require('less');
const LessPluginCleanCSS = require('less-plugin-clean-css');
const fs = require('fs');
// ng zorro defined styles
const basicStyles = `@import './node_modules/ng-zorro-antd/ng-zorro-antd.less';`;
// ng zorro compact theme variables
const compactThemeVars = require('ng-zorro-antd/compact-theme');
// ng zorro dark theme variables
const darkThemeVars = require('ng-zorro-antd/dark-theme');
less.render(`${basicStyles}`, {
javascriptEnabled: true,
plugins: [new LessPluginCleanCSS({ advanced: true })],
modifyVars: {
...compactThemeVars,
...{
// for the compact theme
// you need to add your color variables here
// you can find the full variables list here
// https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/scripts/site/_site/doc/theme.less
'primary-color': '#111521',
'error-color': 'green'
}
}
}).then(data => {
fs.writeFileSync(
// output path for the theme style
'./src/assets/themes/compact.css',
data.css
)
}).catch(e => {
// log the render error
console.error(e);
});
less.render(`${basicStyles}`, {
javascriptEnabled: true,
plugins: [new LessPluginCleanCSS({ advanced: true })],
modifyVars: {
...darkThemeVars,
...{
// for the dark theme
// you need to add your color variables here
// you can find the full variables list here
// https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/scripts/site/_site/doc/theme.less
'primary-color': '#02cadb',
'error-color': 'yellow'
}
}
}).then(data => {
fs.writeFileSync(
// output path for the theme style
'./src/assets/themes/dark.css',
data.css
)
}).catch(e => {
// log the render error
console.error(e);
});
这里是完整变量的链接 less variables
运行 node ./less-compiler.js
在终端中(此命令应在 dark.css
文件夹中生成 compact.css
和 src/assets/themes
文件)
(可选) 如果你想运行 node ./less-compiler.js
每次构建项目时,您都可以替换 "build": "ng build",
与 "build": "ng build && node ./less-compiler.js",
在package.json
然后你可以通过 npm run build
构建你的项目命令。
添加 <link rel="stylesheet" id="theme-link" href="/assets/themes/compact.css">
进入head
你的index.html
文件。
定义一个函数,帮助您删除主题链接或将主题链接添加到标题中。 (在我的例子中,函数定义在 app.component.ts
文件中)
// ..........................
export class AppComponent {
theme = '';
constructor() {
setInterval(() => {
this.changeTheme()
}, 2000);
}
changeTheme() {
this.theme = this.theme === 'dark' ? '' : 'dark';
const style = document.getElementById('theme-link') as HTMLLinkElement;
if (this.theme === 'dark') {
style.href = '/assets/themes/dark.css';
} else {
style.href = '/assets/themes/compact.css';
}
}
}
希望这可以帮助您轻松组织运行时主题切换。
这里还有简单项目存储库的链接
关于angular - 如何在运行时更改 ng-zorro 主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61901234/
我有一个特定的问题,例如: 我不喜欢 ng-zorro table 上的边距。在我的浏览器中,我可以看到它从 .ant-table-small>.ant-table-content>.ant-tabl
我需要将DatePicker屏蔽为MM/dd/yyyy,并且我的用户不想手动键入/字符。他们希望能够只输入数字,并且掩蔽本身就能起作用。。我试过NGX-MASK,虽然它对输入效果很好,但对DatePi
我使用 Angular 6.0.1 。当我需要使用ng-zorro-antd时它向我显示了这个错误: ERROR in multi ../node_modules/ng-zorro-antd/src/
与nz-card的使用有关在 ng-zorro . 我试图在卡片正文中对齐样式化的操作按钮,但没有成功。 我希望卡片的高度相同,因此从视觉上看,所有卡片的底部边框都是垂直对齐的。该按钮位于每张卡片的底
我正在处理与用户相关的信息(创建、删除和编辑),为此我使用了相同的响应式(Reactive)表单组。当前的功能之一是与编辑用户信息有关,一旦用户单击编辑,就会出现一个包含该特定用户的所有信息的模态,除
我做了很多研究,但找不到生成 ng-zorro 主题并在运行时更改它的方法。 最后,我找到了一种方法来做到这一点。 最佳答案 演示: https://ashotaleqs.github.io/ng-z
我做了很多研究,但找不到生成 ng-zorro 主题并在运行时更改它的方法。 最后,我找到了一种方法来做到这一点。 最佳答案 演示: https://ashotaleqs.github.io/ng-z
在我的 Angular 项目中,我想到了一个仪表板,它向我展示了不同的流程循环。根据进度,我想更改线条的颜色。 这是现在的样子。 它应该是这样的。 不幸的是,我无法使用 [nzStrokeColor]
我正在使用 Ng-Zorro 的多重选择,它在抽屉里。打开抽屉时,我给 select 元素一个选项列表和一个已经选择的项目列表。可供选择的选项列表工作正常,但已选择的项目不显示。这也可以在这里看到:S
我目前正在开发一个 Entity Framework 项目,我正在使用 nSwagStudio 链接到服务中创建的模型 所以在客户端,我只导入 nSwag 创建的文件。 在我的 Angular com
我正在使用带有 Angular 7.2.4 的 ng-zorro-antd 7.0.0 rc3。 我的问题是:在移动浏览器上使用 nz-range-picker 时我无法水平滚动,看起来元素对于屏幕来
我想为 cacader 延迟加载数据。但是失败了,因为在加载函数中 this=undefined。该功能定义在组件中,组件中的其他功能运行良好。请帮忙,谢谢。 loadCityBuildingDa
Ant Design 的 NG-ZORRO 如果在核心 app.module 中导入就很简单了 我的用例:我想在 UiLibraryModule 中加载 ngZorro(它设置 Zorro 的提供者并
Ant Design 的 NG-ZORRO 如果在核心 app.module 中导入就很简单了 我的用例:我想在 UiLibraryModule 中加载 ngZorro(它设置 Zorro 的提供者并
我有一个简单的 ngFor,我希望每个条目都有一个带下拉菜单的按钮,每个菜单项应该为 ngFor 中的特定项目调用不同的函数。 下面的代码有效,行为符合我的预期。
如果单独使用,以下代码效果很好, Angular6.0 不允许 [(ngModel)] 与 FormGroup (Reactive Forms)。 As 在 angular 6.0 中已弃用,并将在
我是一名优秀的程序员,十分优秀!