How to change the theme of the admin panel using SASS / SCSS?

Question

css

Goodnight.

I had the idea to implement a day / night theme change using SASS / SCSS. It turned out not so easy and not at all subject! So far, I managed to find and

change this thing - https://codepen.io/pawlek/pen/djyERV

$color-light: #fff;
$color-dark: #404549;

That is, when background: $color-dark; you need color: $color-light and vice versa.
and instead of two Default & Night sky buttons, there should be one with an icon that changes accordingly when clicked. Something like this

$('a.light').click(function(e){
        e.preventDefault();
        
        $(this).toggleClass('light dark');
        if($(this).hasClass('light')){
          $(this).html('<i class="fas fa-moon"></i>');
        }
        else{
          $(this).html('<i class="fas fa-sun"></i>');
        }
      });

Thank you )

Answer 1

You collect from your sources (it doesn't matter, scss/sass/less/css/...) two CSS files - one with light theme styles, the other with dark theme. By clicking on the button through js, you change the link to the attached css file.

Answer 2

using SASS/SCSS.

these are preprocessors, the browser does not understand them, the browser understands only css
in JS, on click, change the plugin css of the theme

Answer 3

If someone needs an adequate answer to the question, then the link is an article describing how easy it is to make a theme change based on a variable with themes, a mixin and a SCSS function through changing the class of the root element.
Example:

<div id="app" class="theme-light">
    <div class="container">
        <button class="button">Button</button>
    </div>
</div>

Because of the class .theme-light, the root element will have the button in a light theme, and if you change the class to .theme-dark, the button will change to a dark one.