scss值列表_更改变量值scss

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

Default

Dark

Light

app.component.ts

onSetTheme(theme) {

//TODO here I want to change the theme

}

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

Thanks!

解决方案

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);

}