how to change the global variable inside a scss mixin
theme-variables.scss
//---------------------------------------------------------
//Declare a global variable and set it to red color
-
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: ... // example-2:
