我想为用户提供一个按钮来更改整个网站的主题.我正在使用bootstrap“.scss”文件.
这是我做的：
这是我做的：
我在“src / styles”文件夹中有“dark-styles.scss”和“light-styles.scss”.这两个文件都覆盖了我需要覆盖的类和方法,并且还从“node-module”导入默认值的“bootstrap.scss”.当我通过“.angular-cli.json”向应用程序提供任何这些文件时,如下所示;它完美地运作.
"styles": [
"../node_modules/font-awesome/css/font-awesome.css","../node_modules/@swimlane/ngx-datatable/release/index.css","../node_modules/@swimlane/ngx-datatable/release/assets/icons.css","../src/styles/dark-styles.scss"
],
要么,
"styles": [
"../node_modules/font-awesome/css/font-awesome.css","../src/styles/light-styles.scss"
],
但我想要实现的是动态允许用户更改主题.因此,基于stackoverflow中的其他答案;我在我的应用程序组件中访问了“文档”,这也是我的根组件.它允许我访问整个html页面,其中我有一个链接标记,我可以从app-component设置.
HTML文件
<head> <link id="theme" type="text/scss" rel="stylesheet" src=""> </head> <body> content ..... </body>
角cli.json
"styles": [
"../node_modules/font-awesome/css/font-awesome.css","../node_modules/@swimlane/ngx-datatable/release/assets/icons.css"
],
应用程序,组件：
import { Component,OnInit,Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],})
export class AppComponent implements OnInit {
currentTheme: string;
constructor( @Inject(DOCUMENT) private document) {
}
ngOnInit() {
this.currentTheme = 'dark';
this.document.getElementById('theme').href = '../styles/dark-styles.scss';
}
handelChangeTheme(event) {
if (this.currentTheme === 'dark') {
this.document.getElementById('theme').href = '../styles/light-styles.scss';
this.currentTheme = 'light';
console.log('light');
} else {
this.document.getElementById('theme').href = '../styles/dark-styles.scss';
this.currentTheme = 'dark';
console.log('dark');
}
}
}
在触发事件“handleChangeTheme”时,#theme的href在html文件中发生变化.但它不会更新或应用样式.我知道它与WebPack及其编译scss文件的方式有关.有没有人遇到类似的情况或知道这个问题的解决方案.谢谢