如何更改 scss mixin 中的全局变量 [英] how to change the global variable inside a scss mixin
本文介绍了如何更改 scss mixin 中的全局变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
主题变量.scss
//----------------------------------------------------------//声明一个全局变量并将其设置为红色//---------------------------------------------------------$fg-primary-text: 红色;//---------------------------------------------------------//下面@mixin在styles.scss中用来传递custom-theme//---------------------------------------------------------@mixin 缓存主题颜色($theme) {@include set-global-variables($theme);}//---------------------------------------------------------//local mixin 使用 !global 标志从 $theme 设置全局变量//---------------------------------------------------------@mixin set-global-variables($theme: $theme, $fg-primary-text: $fg-primary-text) {$foreground: map-get($theme, foreground);//从主题中获取前景$fg-primary-text: mat-color($foreground, text) !global;//从主题中获取文本颜色并在此处使用 !global 标志进行设置}<块引用>
component.scss
@import "../../../../assets/themes/theme-variables.scss";.text-color {颜色:$fg-primary-text;//使用变量(但它仍然是红色的)}但是颜色还是红色我的问题是:如何在 scss 中设置全局变量并在 mixin/function 中更改它并在任何 component.scss 中使用它
解决方案
我终于找到了解决方案，在这里分享给需要它的人.
注意:我知道它很长..但耐心阅读你可能会有所收获或者纠正我，如果我做错了什么.
首先从theme.service启动
<块引用>theme.service.ts
import { Injectable } from '@angular/core';从 '@angular/cdk/overlay' 导入 { OverlayContainer };@Injectable({providedIn: 'root' })导出类 ThemeService {构造函数(私有overlayContainer:OverlayContainer){}currentThemeNAME: string = "light-theme";//默认主题private defaultThemeNAME: string = "light-theme";设置默认主题(){this.setTHEME(this.defaultThemeNAME);}//灯光主题private lightThemeNAME: string = "light-theme";设置灯光主题(){this.setTHEME(this.lightThemeNAME);}//黑暗主题private darkThemeNAME: string = "dark-theme";setDarkTHEME() {this.setTHEME(this.darkThemeNAME);}//TO_SET_THE_THEME设置主题(主题名称:字符串){控制台日志(主题名称)；this.currentThemeNAME = themeNAME;this.overlayContainer.getContainerElement().classList.add(this.currentThemeNAME);}//TO_CYCLE_THE_THEME循环主题(){开关(this.currentThemeNAME){案例 this.lightThemeNAME:this.setDarkTHEME();休息;案例 this.darkThemeNAME:this.setLightTHEME();休息;}}}app.module.ts
import { BrowserModule } from '@angular/platform-browser';从@angular/platform-browser/animations"导入 { BrowserAnimationsModule };从'@angular/core' 导入 { NgModule };从 '@angular/router' 导入 { RouterModule };从'@angular/flex-layout'导入{FlexLayoutModule}；//核心服务从 './core/services/theme.service' 导入 { ThemeService };@NgModule({entryComponents: [...],声明:[...]，出口:[...]，进口:[...]，provider: [ ThemeService ],//<----重要引导程序:[AppComponent]，})导出类 AppModule {//重要的构造函数(私有主题SRVC:ThemeService){this.themeSRVC.setDefaultTHEME();//<----重要}}假设我有 2 个主题:
<块引用>1) light-theme.scss
//定义3个主题色//mat-palette 接受 $palette-name、默认、浅色和深色变体$light-theme-primary: mat-palette($mat-grey, 500, 100, 700);$light-theme-accent: mat-palette($mat-pink);$light-theme-warn: mat-palette($mat-red);//创建主题(对于深色背景的主题使用 mat-dark-theme)$light-theme: mat-light-theme( $light-theme-primary, $light-theme-accent, $light-theme-warn);2)dark-theme.scss
//定义3个主题色//mat-palette 接受 $palette-name、默认、浅色和深色变体$dark-theme-primary: mat-palette($mat-grey, 900, 700, 900);$dark-theme-accent: mat-palette($mat-blue-grey);$dark-theme-warn: mat-palette($mat-red);//创建主题(对于深色背景的主题使用 mat-dark-theme)$dark-theme: mat-dark-theme($dark-theme-primary, $dark-theme-accent, $dark-theme-warn);styles.scss
/* 你可以在这个文件中添加全局样式，也可以导入其他样式文件 */@import './assets/fonts/roboto/stylesheet.css';@import './assets/icons/material-icons/v42/stylesheet.css';//重要的@import '~@angular/material/theming';//重要:每个项目始终只包含一次@include mat-core();//重要:在这里导入我们的自定义主题文件@import './assets/themes/light-theme.scss';@import './assets/themes/dark-theme.scss';//重要:导入主题缓存@import './assets/themes/register_components.scss';html,身体 {高度:100%；填充:0px；边距:0px；字体系列:Roboto；}//设置这个主题://设置你组件的根元素的类//示例 1:<body class="dark-theme">... </body>//示例 2:<form [ngClass]="themeSRVC.currentThemeNAME".light 主题{@include angular-material-theme($light-theme);//设置material_theme@include set-components-theme($light-theme);//缓存主题}//设置这个主题://设置你组件的根元素的类//示例 1:<body class="dark-theme">... </body>//示例 2:<form [ngClass]="themeSRVC.currentThemeNAME".dark 主题 {@include angular-material-theme($dark-theme);//设置material_theme@include set-components-theme($dark-theme);//缓存主题}//...同样在这里注册您的其他主题register_components.scss
@import '~@angular/material/theming';@import '../src/app/erp/security/erp-login/erp-login.component.scss';@import '../src/app/erp/dashboard/dashboard.component.scss';@mixin set-components-theme($theme) {//###############################################################################//--- STEP-(1/3): EXTRACT_PALLETE_AND_COLORS---------//https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss//https://github.com/angular/material2/blob/master/src/lib/core/ripple/_ripple.scss//###############################################################################//---01-PRIMARY--------------------$primary-palette: map-get($theme,primary);//<---$primary-color: mat-color($primary-palette, default);$primary-light: mat-color($primary-palette, light);$primary-dark: mat-color($primary-palette, darker);//<---//---02-ACCENT----------------------$accent-palette: map-get($theme, Accent);//<---$accent-color: mat-color($accent-palette, default);$accent-light: mat-color($accent-palette, light);$accent-dark: mat-color($accent-palette, darker);//<---//---03-WARN------------------------$warn-palette: map-get($theme, warn);//<---$warn-color: mat-color($warn-palette, default);$warn-light: mat-color($warn-palette, light);$warn-dark: mat-color($warn-palette, darker);//<---//---04-前景-------------------$foreground-palette: map-get($theme, foreground);//<---$fg-base: mat-color($foreground-palette, base);//full_black 或 full_white$fg-primary-text: mat-color($foreground-palette, text);$fg-secondary-text: mat-color($foreground-palette, secondary-text);$fg-hint-text: mat-color($foreground-palette,hint-text);$fg-disabled: mat-color($foreground-palette, disabled);$fg-disabled-button: mat-color($foreground-palette, disabled-button);$fg-disabled-text: mat-color($foreground-palette, disabled-text);$fg-divider: mat-color($foreground-palette,divider);$fg-dividers: mat-color($foreground-palette,dividers);$fg-elevation: mat-color($foreground-palette,elevation);$fg-icon: mat-color($foreground-palette, icon);$fg-icons: mat-color($foreground-palette, 图标);$fg-slider-min: mat-color($foreground-palette,slider-min);$fg-slider-off: mat-color($foreground-palette,slider-off);$fg-slider-off-active: mat-color($foreground-palette,slider-off-active);//<--//---05-背景-------------------$background-palette: map-get($theme, background);//<---$bg-color: mat-color($background-palette, background);$bg-status-bar: mat-color($background-palette, status-bar);$bg-app-bar: mat-color($background-palette, app-bar);$bg-hover: mat-color($background-palette, hover);$bg-card: mat-color($background-palette, card);$bg-dialog: mat-color($background-palette, dialog);$bg-disabled-button: mat-color($background-palette, disabled-button);$bg-raised-button: mat-color($background-palette, raise-button);$bg-focused-button: mat-color($background-palette,focused-button);$bg-selected-button: mat-color($background-palette, selected-button);$bg-selected-disabled-button: mat-color($background-palette, selected-disabled-button);$bg-disabled-button-toggle: mat-color($background-palette, disabled-button-toggle);$bg-unselected-chip: mat-color($background-palette, unselected-chip);$bg-disabled-list-option: mat-color($background-palette, disabled-list-option);//<---//---COMMON_COLORS---------------//使用is_dark_mode标志直接从主题中获取$is-dark-theme: map-get($theme, is-dark);//<---//主要_文本$fg-dark-primary-text: rgba(black, 0.87);$fg-light-primary-text: 白色；$fg-primary-text-inverse: if($is-dark-theme, $fg-dark-primary-text, $fg-light-primary-text);//<---//次要_文本$fg-dark-secondary-text: rgba(black, 0.54);$fg-light-secondary-text: rgba(white, 0.7);$fg-secondary-text-inverse: if($is-dark-theme, $fg-dark-secondary-text, $fg-light-secondary-text);//<---//disabled_text$fg-dark-disabled-text: rgba(black, 0.38);$fg-light-disabled-text: rgba(white, 0.5);$fg-disabled-text-inverse: if($is-dark-theme, $fg-dark-disabled-text, $fg-light-disabled-text);//<---//分隔线$bg-dark-dividers: rgba(black, 0.12);$bg-light-dividers: rgba(white, 0.12);$bg-dividers-inverse: if($is-dark-theme, $bg-dark-dividers, $bg-light-dividers);//<---//重点$bg-dark-focused: rgba(black, 0.12);$bg-light-focused: rgba(white, 0.12);$bg-focused-inverse: if($is-dark-theme, $bg-light-focused, $bg-light-focused);//<---//--- DERIVED_COLORS--------------$_bg-ripple: rgba($fg-base, 0.1);//规格$_bg-list-item: $bg-card;$_scrollbar-bg: rgba($fg_icon, .4);$_scrollbar-fg: rgba($fg_icon, .05);$_scrollbar-hover-bg: rgba($fg_icon, .16);$_scrollbar-hover-fg: rgba($fg_icon, .20);//<----//###############################################################################//--- STEP-(2/3): CREATE_GLOBAL_CLASSES_THAT_DEPEND_ON_THE_ABOVE_THEME_COLORS--//###############################################################################//++++++MAT-LIST-ITEM++++++++++++++++++++++++++++++.mat-list-item {背景颜色:$_bg-list-item；}.mat-list-item.selected {背景色:$primary-light;}.mat-list-icon {颜色:$fg_icon；}//<---//###############################################################################//---STEP-(3/3): PASS_REQUIRED_COLORS_TO_THE_COMPONENTS-----(注意:不是$主题)//###############################################################################//---Pass_Colors_required_by_the_DashboardComponent@include 仪表板组件主题(//---$fg-primary-text, $fg-secondary-text,//---$fg-primary-text-inverse, $fg-secondary-text-inverse,//---$_bg-ripple);//<--//---Pass_Colors_required_by_the_erp-Component@include erp-component-theme($fg-primary-text, $fg-secondary-text);//同样在这里注册你的所有组件并只传递所需的颜色}//--------------------------------------------dashboard.component.scss
@import '~@angular/material/theming';//colors_passed_by_the register_component.scss@mixin 仪表板组件主题($fg-primary-text, $fg-secondary-text,$fg-primary-text-inverse, $fg-secondary-text-inverse,$_bg-ripple) {//组件的html类.sidenav-header-primary-text {颜色:$fg-primary-text-inverse;字体大小:18px；行高:28px；底边距:8px；}.sidenav-header-secondary-text {颜色:$fg-secondary-text-inverse;字体大小:15px；行高:15px；底部边距:2px}.list-item-primary-text {颜色:$fg-primary-text;}.list-item-secondary-text {颜色:$fg-secondary-text;}}dashboard.component.ts
@Component({选择器:应用仪表板"，templateUrl: './dashboard.component.html',styleUrls: ['./dashboard.component.scss'],})导出类 DashboardComponent 实现 OnInit {//###-重要:包括 ThemeService构造函数(私有主题SRVC:ThemeService){//...}//...//---}dashboard.component.html
<mat-sidenav-container [ngClass]="themeSRVC.currentThemeNAME"><!-- .... --><!-- 包括来自组件的 scss 的类 --><h4 class="list-item-primary-text" mat-line>456</h4><p class="list-item-scondary-text" mat-line>123</p><!-- .... --></mat-sidenav-container>就是这样..！
theme-variables.scss
//---------------------------------------------------------
//Declare a global variable and set it to red color
//---------------------------------------------------------
$fg-primary-text: red;
//---------------------------------------------------------
//below @mixin is used in styles.scss to pass the custom-theme
//---------------------------------------------------------
@mixin cache-theme-colors($theme) {
@include set-global-variables($theme);
}
//---------------------------------------------------------
//local mixin to set the global-variable from the $theme using !global flag
//---------------------------------------------------------
@mixin set-global-variables($theme: $theme, $fg-primary-text: $fg-primary-text) {
$foreground: map-get($theme, foreground); //get foreground from the theme
$fg-primary-text: mat-color($foreground, text) !global; //get the text color from the theme and set it here using the !global flag
}
component.scss
@import "../../../../assets/themes/theme-variables.scss";
.text-color {
color: $fg-primary-text; //use the variable (but it is still red)
}
But the color is still red My question is: how to set the global variable in scss and change it inside a mixin/function and use it in any component.scss
解决方案
Atlast I've found a solution, and I'm sharing here for those who need it.
Note: I know it's very long.. but read patiently you may get something or correct me If I'm doing anything wrong.
First start from the theme.service
theme.service.ts
import { Injectable } from '@angular/core';
import { OverlayContainer } from '@angular/cdk/overlay';
@Injectable({ providedIn: 'root' })
export class ThemeService {
constructor(private overlayContainer: OverlayContainer) {}
currentThemeNAME: string = "light-theme";
//DEFAULT_THEME
private defaultThemeNAME: string = "light-theme";
setDefaultTHEME() {
this.setTHEME(this.defaultThemeNAME);
}
//LIGHT_THEME
private lightThemeNAME: string = "light-theme";
setLightTHEME() {
this.setTHEME(this.lightThemeNAME);
}
//DARK_THEME
private darkThemeNAME: string = "dark-theme";
setDarkTHEME() {
this.setTHEME(this.darkThemeNAME);
}
//TO_SET_THE_THEME
setTHEME(themeNAME: string) {
console.log(themeNAME);
this.currentThemeNAME = themeNAME;
this.overlayContainer.getContainerElement().classList.add(this.currentThemeNAME);
}
//TO_CYCLE_THE_THEME
cycleTHEME() {
switch (this.currentThemeNAME) {
case this.lightThemeNAME:
this.setDarkTHEME();
break;
case this.darkThemeNAME:
this.setLightTHEME();
break;
}
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FlexLayoutModule } from '@angular/flex-layout';
//CORE-SERVICES
import { ThemeService } from './core/services/theme.service';
@NgModule({
entryComponents: [...],
declarations: [...],
exports: [...],
imports: [...],
providers: [ ThemeService ], //<----Important
bootstrap: [AppComponent],
})
export class AppModule {
//important
constructor(private themeSRVC: ThemeService) {
this.themeSRVC.setDefaultTHEME(); //<----Important
}
}
Lets Assume I've 2 themes:
1) light-theme.scss
// define 3 theme color
// mat-palette accepts $palette-name, default, lighter and darker variants
$light-theme-primary: mat-palette($mat-grey, 500, 100, 700);
$light-theme-accent: mat-palette($mat-pink);
$light-theme-warn: mat-palette($mat-red);
// create theme (use mat-dark-theme for themes with dark backgrounds)
$light-theme: mat-light-theme( $light-theme-primary, $light-theme-accent, $light-theme-warn);
2) dark-theme.scss
// define 3 theme color
// mat-palette accepts $palette-name, default, lighter and darker variants
$dark-theme-primary: mat-palette($mat-grey, 900, 700, 900);
$dark-theme-accent: mat-palette($mat-blue-grey);
$dark-theme-warn: mat-palette($mat-red);
// create theme (use mat-dark-theme for themes with dark backgrounds)
$dark-theme: mat-dark-theme($dark-theme-primary, $dark-theme-accent, $dark-theme-warn);
styles.scss
/* You can add global styles to this file, and also import other style files */
@import './assets/fonts/roboto/stylesheet.css';
@import './assets/icons/material-icons/v42/stylesheet.css';
//important
@import '~@angular/material/theming';
//important: always include only once per project
@include mat-core();
//important: import our custom theme files here
@import './assets/themes/light-theme.scss';
@import './assets/themes/dark-theme.scss';
//important: import the theme cacher
@import './assets/themes/register_components.scss';
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
font-family: Roboto;
}
// to set this theme:
// set yout component's root element's class
// example-1: <body class="dark-theme"> ... </body>
// example-2: <form [ngClass]="themeSRVC.currentThemeNAME"
.light-theme {
@include angular-material-theme($light-theme); //set material_theme
@include set-components-theme($light-theme); //cache_theme
}
// to set this theme:
// set yout component's root element's class
// example-1: <body class="dark-theme"> ... </body>
// example-2: <form [ngClass]="themeSRVC.currentThemeNAME"
.dark-theme {
@include angular-material-theme($dark-theme); //set material_theme
@include set-components-theme($dark-theme); //cache_theme
}
//...similarly register your other themes here
register_components.scss
@import '~@angular/material/theming';
@import '../src/app/erp/security/erp-login/erp-login.component.scss';
@import '../src/app/erp/dashboard/dashboard.component.scss';
@mixin set-components-theme($theme) {
//###################################################################################
//---STEP-(1/3): EXTRACT_PALLETE_AND_COLORS----------
//https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss
//https://github.com/angular/material2/blob/master/src/lib/core/ripple/_ripple.scss
//###################################################################################
//---01-PRIMARY---------------------
$primary-palette: map-get($theme, primary); //<---
$primary-color: mat-color($primary-palette, default);
$primary-light: mat-color($primary-palette, lighter);
$primary-dark: mat-color($primary-palette, darker); //<---
//---02-ACCENT----------------------
$accent-palette: map-get($theme, accent); //<---
$accent-color: mat-color($accent-palette, default);
$accent-light: mat-color($accent-palette, lighter);
$accent-dark: mat-color($accent-palette, darker); //<---
//---03-WARN------------------------
$warn-palette: map-get($theme, warn); //<---
$warn-color: mat-color($warn-palette, default);
$warn-light: mat-color($warn-palette, lighter);
$warn-dark: mat-color($warn-palette, darker); //<---
//---04-FOREGROUND------------------
$foreground-palette: map-get($theme, foreground); //<---
$fg-base: mat-color($foreground-palette, base); //full_black or full_white
$fg-primary-text: mat-color($foreground-palette, text);
$fg-secondary-text: mat-color($foreground-palette, secondary-text);
$fg-hint-text: mat-color($foreground-palette, hint-text);
$fg-disabled: mat-color($foreground-palette, disabled);
$fg-disabled-button: mat-color($foreground-palette, disabled-button);
$fg-disabled-text: mat-color($foreground-palette, disabled-text);
$fg-divider: mat-color($foreground-palette, divider);
$fg-dividers: mat-color($foreground-palette, dividers);
$fg-elevation: mat-color($foreground-palette, elevation);
$fg-icon: mat-color($foreground-palette, icon);
$fg-icons: mat-color($foreground-palette, icons);
$fg-slider-min: mat-color($foreground-palette, slider-min);
$fg-slider-off: mat-color($foreground-palette, slider-off);
$fg-slider-off-active: mat-color($foreground-palette, slider-off-active); //<--
//---05-BACKGROUND------------------
$background-palette: map-get($theme, background); //<---
$bg-color: mat-color($background-palette, background);
$bg-status-bar: mat-color($background-palette, status-bar);
$bg-app-bar: mat-color($background-palette, app-bar);
$bg-hover: mat-color($background-palette, hover);
$bg-card: mat-color($background-palette, card);
$bg-dialog: mat-color($background-palette, dialog);
$bg-disabled-button: mat-color($background-palette, disabled-button);
$bg-raised-button: mat-color($background-palette, raised-button);
$bg-focused-button: mat-color($background-palette, focused-button);
$bg-selected-button: mat-color($background-palette, selected-button);
$bg-selected-disabled-button: mat-color($background-palette, selected-disabled-button);
$bg-disabled-button-toggle: mat-color($background-palette, disabled-button-toggle);
$bg-unselected-chip: mat-color($background-palette, unselected-chip);
$bg-disabled-list-option: mat-color($background-palette, disabled-list-option); //<---
//---COMMON_COLORS---------------
//fetch from the theme directly using the is_dark_mode flag
$is-dark-theme: map-get($theme, is-dark); //<---
//primary_text
$fg-dark-primary-text: rgba(black, 0.87);
$fg-light-primary-text: white;
$fg-primary-text-inverse: if($is-dark-theme, $fg-dark-primary-text, $fg-light-primary-text); //<---
//secondary_text
$fg-dark-secondary-text: rgba(black, 0.54);
$fg-light-secondary-text: rgba(white, 0.7);
$fg-secondary-text-inverse: if($is-dark-theme, $fg-dark-secondary-text, $fg-light-secondary-text); //<---
//disabled_text
$fg-dark-disabled-text: rgba(black, 0.38);
$fg-light-disabled-text: rgba(white, 0.5);
$fg-disabled-text-inverse: if($is-dark-theme, $fg-dark-disabled-text, $fg-light-disabled-text); //<---
//dividers
$bg-dark-dividers: rgba(black, 0.12);
$bg-light-dividers: rgba(white, 0.12);
$bg-dividers-inverse: if($is-dark-theme, $bg-dark-dividers, $bg-light-dividers); //<---
//focused
$bg-dark-focused: rgba(black, 0.12);
$bg-light-focused: rgba(white, 0.12);
$bg-focused-inverse: if($is-dark-theme, $bg-light-focused, $bg-light-focused); //<---
//---DERIVED_COLORS--------------
$_bg-ripple: rgba($fg-base, 0.1); //SPEC
$_bg-list-item: $bg-card;
$_scrollbar-bg: rgba($fg_icon, .4);
$_scrollbar-fg: rgba($fg_icon, .05);
$_scrollbar-hover-bg: rgba($fg_icon, .16);
$_scrollbar-hover-fg: rgba($fg_icon, .20); //<----
//###################################################################################
//---STEP-(2/3): CREATE_GLOBAL_CLASSES_THAT_DEPEND_ON_THE_ABOVE_THEME_COLORS--
//###################################################################################
//++++++MAT-LIST-ITEM++++++++++++++++++++++++++++
.mat-list-item {
background-color: $_bg-list-item;
}
.mat-list-item.selected {
background-color: $primary-light;
}
.mat-list-icon {
color: $fg_icon;
} //<---
//###################################################################################
//---STEP-(3/3): PASS_REQUIRED_COLORS_TO_THE_COMPONENTS-----(note: not the $theme)
//###################################################################################
//---Pass_Colors_required_by_the_DashboardComponent
@include dashboard-component-theme( //---
$fg-primary-text, $fg-secondary-text, //---
$fg-primary-text-inverse, $fg-secondary-text-inverse, //---
$_bg-ripple); //<--
//---Pass_Colors_required_by_the_erp-Component
@include erp-component-theme($fg-primary-text, $fg-secondary-text);
//similarly register all your components here and pass only the required colors
} //--------------------------------------------
dashboard.component.scss
@import '~@angular/material/theming';
//colors_passed_by_the register_component.scss
@mixin dashboard-component-theme(
$fg-primary-text, $fg-secondary-text,
$fg-primary-text-inverse, $fg-secondary-text-inverse,
$_bg-ripple) {
//Classes for component's html
.sidenav-header-primary-text {
color: $fg-primary-text-inverse;
font-size: 18px;
line-height: 28px;
margin-bottom: 8px;
}
.sidenav-header-secondary-text {
color: $fg-secondary-text-inverse;
font-size: 15px;
line-height: 15px;
margin-bottom: 2px
}
.list-item-primary-text {
color: $fg-primary-text;
}
.list-item-secondary-text {
color: $fg-secondary-text;
}
}
dashboard.component.ts
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent implements OnInit {
//###-Important: include the ThemeService
constructor(private themeSRVC: ThemeService) {
//...
}
//...
//---
}
dashboard.component.html
<!-- Important set [ngClass] of the root element from the themeSRVC -->
<mat-sidenav-container [ngClass]="themeSRVC.currentThemeNAME">
<!-- .... -->
<!-- Include the classes from the component's scss -->
<h4 class="list-item-primary-text" mat-line>456</h4>
<p class="list-item-scondary-text" mat-line>123</p>
<!-- .... -->
</mat-sidenav-container>
That's It..!
这篇关于如何更改 scss mixin 中的全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
