Changing variables values scss

Question

I have defined different variables in my scss file, I used these variables in some scss files.

_variables.scss

$light-theme: rgba(94,161,215,0.3);
$dark-theme: #5EA1D7;
$darker-theme: #57647A;
$very-dark-theme: #455061;

How can I define 3 groups of themes? Something like:

default-theme {
    $light-theme: rgba(94,161,215,0.3);
    $dark-theme: #5EA1D7;
    $darker-theme: #57647A;
    $very-dark-theme: #455061;
}

dark-theme {
    $light-theme: black;
    $dark-theme: brown;
    $darker-theme: black;
    $very-dark-theme: black;
}

light-theme {
    $light-theme: black;
    $dark-theme: brown;
    $darker-theme: black;
    $very-dark-theme: black;
}

I would like to change the values according to selected theme. For example I have 3 buttons, selecting on them, will change the variable colors.

app.component.html

 <button mat-raised-button (click)="onSetTheme('default-theme')">Default</button>
  <button mat-raised-button (click)="onSetTheme('dark-theme')">Dark</button>
  <button mat-raised-button (click)="onSetTheme('light-theme')">Light</button>

app.component.ts

  onSetTheme(theme) {
    //TODO here I want to change the theme
  }

How can I change the theme inside onSetTheme() function.

Thanks!

Answer 1

Why can't we dynamically change sass variables in the browser?

Sass is a pre-processor for CSS that makes it easier to write your style rules during development. The browser will not load your .scss/.sass files; it will load CSS -- so your .scss/.sass must be converted to CSS for the browser.

Your Sass variables are only variables in your Sass files. Once converted into CSS, the variables will be replaced with the values they represented at the time of compilation.

.scss in development:

body {
    background: $dark-theme;
}

Compiled CSS that the browser loads:

body {
    background: black;
}

Your onSetTheme function is a javascript function that will run in the browser and will not have access to change the sass variables because they don't exist at this point. The browser only loads the compiled CSS (it will not load the original Sass files and variables).

---

How to dynamically change your website theme in the browser?

Toggling CSS classes

CSS variables (mdn)