Changing scss variable in runtime

0
Is there a way (or a widget) to let an end user customize the look and feel of the app they are in, by overwriting a $variable in custom-variables.scss? So lets say I defined  $colorvariable : #ffffff; in custom-variables.scss. Can the app user overwrite that specific variable so the whole app changes color?  
asked
1 answers
2

Hi Sven,

Due to the nature of scss, it's not possible to do so. Browsers cannot read scss, so all scss is converted into css before it is sent to the browser.

However, what you can do is use css variables as an scss variable. Your variable would look something like this:

$colorvariable: var(--user-color);

You can then define this color in the :root:

:root {
  --user-color: white;
}

If you want to change it, you can call a JavaScript action from a nanoflow to change the variable definition:

root.style.setProperty('--user-color', "#acacea");

 

answered