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!

Corticosterone

I am using angular 4 framework – Corticosterone

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)

Marcela

Answer 2

You can use SASS variables and other SASS stuffs AND CSS variables together.

SASS

$body-margin: 0 10px;

:root {
    --bg-color: #000;
    --text-color: #FFF;
}


body {
    background: var(--bg-color);
    color: var(--text-color;
    margin: $margin;
}

JS

onSetTheme(theme) {
    let bgColor, textColor;
    switch(theme) {
      case light:
          bgColor = #FFF;
          textColor = #000;
          break;
      case dark:
          bgColor = #000;
          textColor = #FFF;
          break;
    }
    document.querySelector('body').style.setProperty('--bg-color', bgColor);
    document.querySelector('body').style.setProperty('--text-color', textColor);
}

Relevance

IE not supported – Gabardine