为什么不能更新CSS变量名称以应用不同的颜色主题？

Question

I want to switch between two css themes in an else/if statement built in scss by changing a single custom variable via javascript.

I see lots of examples out there about how change one or two colors in css variables via javascript, but I want to change the whole theme of a site by changing a $theme variable only.

Check the codepen: https://codepen.io/roroland/pen/gVWLBm

// Var defaults
$theme: default;
$primary: null;
$warn: null;
:root {
  --theme: #{$theme};
}

// If theme is 'default' use this
@if ( $theme == "default") {
  $primary: orange;
  $warn: purple;
}
// If theme is 'other' use this instead
@elseif($theme == "other") {
  $primary: black;
  $warn: blue;
}

p {
  display: block;
  padding: 2rem;
  color: $primary;
  background: $warn;
}

JS

document.documentElement.style.setProperty('--theme', "other");

If I try to update $theme it doesn't work, I tried with and without interpolation, setting 'null' the theme var, etc.. it just ignore the JS instruction.

Can someone explain why isn't working? Thanks

Answer 1

I think what you are trying to do, can not be done.

SCSS is a CSS preprocessor which runs on the server-side. It would compile into CSS and then be rendered in the client-side (browser). And once it is compiled to CSS, all the SCSS variables are gone (Because the browser can only render CSS).

The JS which you are writing is being executed in the browser (client-side).

So, if you want this to be done, you need to either

• Assign classes to elements and style them. Then, change the Class using JS

document.getElementById("MyElement").className = "other-theme";
document.getElementById("MyElement").className = "default-theme";

And in CSS,

.other-theme{
color: orange;
background: purple;
}

.default-theme{
color: black;
background: blue;
}

You may use SCSS for this CSS style generation.

• Or, you may use an approach with AJAX which sends requests to the server and gets the updated style sheet.

Answer 2

This is a job for CSSVariables (dynamic) that unlike Sass variables (static) works at run-time.

 /* toggle theme class */ addEventListener('click', e => { document.documentElement.classList.contains('other') ? document.documentElement.classList.remove('other') : document.documentElement.classList.add('other'); }) 

 /* default theme */ :root { --primary: orange; --warn: purple; } /* other theme */ :root.other { --primary: black; --warn: blue; } p { display: block; padding: 2rem; /* use theme colors */ color: var(--primary); background: var(--warn); } 

 <h2>Click to toggle theme class</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio dolorem quas quod eaque voluptatem error, rem vero non. Eveniet maxime saepe fugiat tenetur dignissimos enim, provident earum illo quasi fugit?</p> 

Answer 3

I think you should implement javascript rather than complicated css by adding an event listener and toggle the class (have two different classes)

This link might help

https://www.w3schools.com/howto/howto_js_toggle_class.asp