Angular 4 CLI,WebPack,为整个网站动态切换bootstrap主题
Vir*_*odh 12 sass twitter-bootstrap webpack angular-cli angular
我想为用户提供一个按钮来更改整个网站的主题.我正在使用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",
"../node_modules/@swimlane/ngx-datatable/release/index.css",
"../node_modules/@swimlane/ngx-datatable/release/assets/icons.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/index.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文件的方式有关.有没有人遇到类似的情况或知道这个问题的解决方案.谢谢
我刚刚在本地做了你的例子,type="text/scss"在我改变text/css它开始工作之后似乎是问题.我首先想到你需要重新创建元素,但问题似乎与类型有关
由于其主题,我会建议你使用这些文件的编译版本的CSS把它们放到assets文件夹和角度,CLI将在复制它们serve和build
另外当你在你的angular中引用scss时,用webpack编译为css.
通过使用以下方法，我设法使动态主题在 Angular 4 + Bootstrap 中工作：
使用地图定义主题颜色：
$themes: (
alpha: (
primary: #2b343e,
info: #3589c7,
top-color: #000000,
top-font-color: #ffffff,
...
),
beta: (
primary: #d2a444,
info: #d2a444,
top-color: #ffffff,
top-font-color: #000000,
...
)
)
然后，创建以下 mixin 来为每个主题名称和给定的属性输出颜色：
@mixin theme($property, $key, $themes: $themes) {
@each $theme, $colors in $themes {
&.theme-#{$theme},
.theme-#{$theme} & {
#{$property}: map-get($colors, $key);
}
}
}
我使用mixins来控制单个属性：
@mixin color($arguments...) {
@include themify('color', $arguments...);
}
@mixin background-color($arguments...) {
@include themify('background-color', $arguments...);
}
对于每个“可主题化”的组件，我必须在声明属性时使用上面的mixin：
.page-top {
@include background-color('top-color');
@include color('top-font-color');
height: 66px;
width: 100%;
...
}
CSS 输出将类似于：
.page-top {
height: 66px;
width: 100%;
...
}
.page-top.theme-alpha,
.theme-alpha .page-top {
background-color: #000000;
color: #ffffff;
}
.page-top.theme-beta,
.theme-beta .page-top {
background-color: #ffffff;
color: #000000;
}
最后，要使主题可用，您必须在某些父组件中控制主题类：
<!-- class="theme-alpha" -->
<main themeChange>
<page-top></page-top>
<sidebar></sidebar>
<page-bottom></page-bottom>
</main>
该themeChange指令可以这样写：
@Directive({
selector: '[themeChange]'
})
export class ThemeChange implements OnInit {
@HostBinding('class') classes: string;
private _classes: string[] = [];
ngOnInit() {
// grab the theme name from some config, variable or user input
this.classesString = myConfig.theme;
}
}
经过几个小时的尝试，我终于让引导主题切换器工作了。这是我的解决方案：
- 不要使用 bootswatch.scss，而是下载每个主题的编译版本，将它们放在相同的资产文件夹中并相应地重命名文件。
将此行添加到 index.html。选择默认主题：
Run Code Online (Sandbox Code Playgroud)< link id="theme" type="text/css" rel="stylesheet" href="/assets/css/theme_slate_bootstrap.min.css"> ... ... <body class="theme-slate"> ...
3.目前正在app.component中设置切换主题的快捷方式。所以这是 app.component.ts
import { Component, OnInit, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
@Component({
selector: 'apps',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
private currentTheme: string = 'slate';
constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document) { }
ngOnInit() {}
theme(type) {
this.renderer.removeClass(document.body, 'theme-'+this.currentTheme);
this.currentTheme = type;
this.renderer.addClass(document.body, 'theme-'+this.currentTheme);
this.document.getElementById('theme').href = '/assets/css/theme_'+type+'_bootstrap.min.css';
}
}
切换主题的按钮
Run Code Online (Sandbox Code Playgroud)<div style="display:block; position: absolute; top:0; right:0; text-align:right; z-index:100000;"> <button class="btn btn-primary btn-sm" (click)="theme('slate')">Slate</button> <button class="btn btn-secondary btn-sm" (click)="theme('yeti')">Yeti</button> <button class="btn btn-secondary btn-sm" (click)="theme('darkly')">Darkly</button> </div>在 angular.json 中添加这个自定义文件
Run Code Online (Sandbox Code Playgroud)"styles": [ "src/assets/scss/custom.scss" ],custom.scss - 添加您的自定义代码以在此处工作
Run Code Online (Sandbox Code Playgroud)$themes: ( slate: ( name: 'slate', primary: #3A3F44, secondary: #7A8288, ... ), yeti: ( name: 'yeti', primary: #008cba, secondary: #eee, ... ), darkly: ( name: 'darkly', primary: #008cba, secondary: #eee, ... ), ); /* * Implementation of themes */ @mixin themify($themes) { @each $theme, $map in $themes { .theme-#{$theme} & { $theme-map: () !global; @each $key, $submap in $map { $value: map-get(map-get($themes, $theme), '#{$key}'); $theme-map: map-merge($theme-map, ($key: $value)) !global; } @content; $theme-map: null !global; } } } @function themed($key) { @return map-get($theme-map, $key); } * { @include themify($themes) { // custom theme to your needs. Add here @if themed('name') == 'slate' { } @if themed('name') == 'yeti' { } @if themed('name') == 'darkly' { } // Below will effect all themes .btn, .form-control, .dropdown, .dropdown-menu { border-radius: 0; } // This is just example to code. When switching theme, primary button theme should changed. Below code is not required. .btn-primary { background-color: themed('primary'); border-color: themed('primary'); } } } // *********************************************************************** @import "custom-additional-classes";
希望这能帮助每个寻求引导主题切换器解决方案的人
| 归档时间： |
|
| 查看次数： |
4683 次 |
| 最近记录： |