Как с помощью SASS/SCSS сделать смену темы админ панели?

Question

[Павел Воронюк]

Доброй ночи.

Задался идеей осуществить смену темы day / night с помощю SASS/SCSS. Оказалось не так просто и вообще не подвластно!

Пока что получилось найти и изменить вот такую штуку - https://codepen.io/pawlek/pen/djyERV

Но все-равно не получаеться сделать как задумано(

Проблема заключается в выборе цветов. Админка или темная или светлая и цвета

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

Тоесть когда background: $color-dark; нужно чтобы color: $color-light и наоборот.
и вместо двух кнопок Default & Night sky чтобы была одна с иконкой которая соответственно меняется при клике. Что-то типо этого

$('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>');
				}
			});

Спасибо )

Answer 1

[Егор Живагин]

Собираете из своих исходников (не важно, scss/sass/less/css/...) два CSS файла - один со стилями светлой темы, другой - тёмной. По клику на кнопку через js меняете ссылку на подключённый css файл.

Answer 2

[Виталий]

с помощю SASS/SCSS.

это препроцессоры, браузер их не понимает, браузер понимает только css

Как сделать смену темы админ панели?

в JS по клику меняете подключаемый css темы

Answer 3

[Алексей Шелементьев]

Если кому-то пригодится адекватный ответ на вопрос, то по ссылке статья, описывающая, как легко сделать смену темы на основе переменной с темами, миксина и функции SCSS через смену класса корневого элемента.
Пример:

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

Из-за класса .theme-light у корневого элемента кнопка будет в светлой теме, а если заменить класс на .theme-dark – кнопка изменится на тёмную.