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

Доброй ночи.

Задался идеей осуществить смену темы 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>');
				}
			});


Спасибо )
  • Вопрос задан
  • 372 просмотра
Решения вопроса 1
Krasnodar_etc
@Krasnodar_etc
little front
Собираете из своих исходников (не важно, scss/sass/less/css/...) два CSS файла - один со стилями светлой темы, другой - тёмной. По клику на кнопку через js меняете ссылку на подключённый css файл.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
rim89
@rim89
программист-велосипедист
с помощю SASS/SCSS.

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

в JS по клику меняете подключаемый css темы
Ответ написан
Rushelex
@Rushelex
Frontend developer
Если кому-то пригодится адекватный ответ на вопрос, то по ссылке статья, описывающая, как легко сделать смену темы на основе переменной с темами, миксина и функции SCSS через смену класса корневого элемента.
Пример:
<div id="app" class="theme-light">
    <div class="container">
        <button class="button">Button</button>
    </div>
</div>

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы