Переключатель темной и светлой тем с использованием переменных CSS и JavaScript
Переменные CSS дают исключительную возможность создавать темы и легко переключать темы для веб-сайтов. Изменение цветовых схем современных веб-сайтов становится намного проще с помощью простого CSS и нескольких строк JavaScript.
Давайте взглянем на создание простого переключателя тем, используя CSS-переменные и чистый JavaScript. Такой подход упрощает реализацию переключения тем в любых интерфейсных фреймворках.
Пример для сайта
Единство стиля в дизайне подразумевает узнаваемость, а не скучный шаблонный вид для всех разделов, рубрик, страниц сайта. Узнаваемость выражается в стиле, деталях оформления и необходима для продвижения бренда, а набор отличных по дизайну страниц нельзя назвать стильным дизайном
<div class="toggle-box">
<input type="checkbox" name="checkbox1" id="toggle-box-checkbox">
<label for="toggle-box-checkbox" class="toggle-box-label-left"></label>
<label for="toggle-box-checkbox" class="toggle-box-label"></label>
</div>
CSS оформление кнопки переключения
<style>
/* переключатель темы start */
.toggle-box:after{ content:"\25cf " " \2601";}
.toggle-box:before{ content:"\263c " " \25cb";}
.toggle-box {display:inline-block; position:relative;margin:1em;}
.toggle-box input{ display:none}
.toggle-box label{ display:inline-block; position:relative; padding:0; font-size:14px; line-height:16px; cursor:pointer; color:hsla(0,0%,58.4%,.51)}
.toggle-box input[type=checkbox]:checked+.toggle-box-label-left{ color:hsla(0,0%,58.4%,.51)}
.toggle-box input[type=checkbox]+.toggle-box-label-left{ color:hsla(0,0%,98%,.51)}
.toggle-box input[type=checkbox]:checked+.toggle-box-label-left:before{ right:17px; box-shadow:5px 5px 0 0 #eee; background:transparent}
.toggle-box-label-left:before{ content:""; display:block; position:absolute; z-index:1; line-height:34px; text-indent:40px; height:16px; width:16px; margin:4px; border-radius:100%; right:26px; bottom:0; background:#383838; -webkit-transform:rotate(-45deg); transform:rotate(-45deg)}
.toggle-box-label-left:after, .toggle-box-label-left:before{ box-sizing:border-box; padding:0; -webkit-transition:.25s ease-in-out; transition:.25s ease-in-out; outline:none}
.toggle-box input[type=checkbox]:checked+.toggle-box-label-left:after{ background:rgba(0,0,0,.15); border:2px solid #ddd}
.toggle-box-label-left:after{ content:""; display:inline-block; width:40px; height:24px; border-radius:16px; background:hsla(0,0%,100%,.15); vertical-align:middle; margin:0 10px; border:2px solid #383838}
.toggle-box-label-left:after, .toggle-box-label-left:before{ box-sizing:border-box; padding:0; -webkit-transition:.25s ease-in-out; transition:.25s ease-in-out; outline:none}
/* переключатель темы end*/
</style>
Получившаяся кнопка в результате
Настройка цветовых схем для темной и светлой тем
Используя переменные CSS, нам нужно создать два класса, определяющих все цвета, которые используются в наших таблицах стилей для двух разных тем. В нашем случае мы создадим :root и [data-theme=dark] .
Классы CSS, представляющие цвета
Обратите внимание, что переменные CSS всегда начинаются с -- перед их именами. Обратите внимание, что кастомные свойства регистрозависимы.
--a-color:#17657d;
--body-background:#f5f5f5;
После объявления, чтобы получить доступ к переменной, вам необходимо использовать функцию var(--имя-переменной) и передать имя переменной в качестве аргумента.
a {color: var(--a-color );}
span {background-color:var(--body-background);}
Использование JavaScript для программного изменения темы
JavaScript переключает и сохранять выбранную тему в localstorage, чтобы всякий раз, когда пользователь возвращается на веб-сайт использовалась ранее выбранная тема.
JavaScript
<script>
/* переключение темы */
const toggleSwitch = document.querySelector('.toggle-box input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
else { document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
/* переключение темы */
</script>
CSS оформление
<style>
/* светлая тема, стандарт */
:root {
--body-background:#f5f5f5; /*цвет body*/
--font-color:#333; /*цвет шрифт*/
--font-d-color:#303030;
--li-ba-color:hsla(242, 67%, 15%, 0.5);
--a-color:#17657d; /*цвет ссылок*/
--filterCB-filter:none;
--Bshadow-box-shadow: 0rem 0rem .3rem rgba(97,97,97,.21);
}
/* темная тема */
[data-theme=dark] {
--body-background:#363636; /*цвет body*/
--font-color:#cfcfcf; /*цвет шрифт*/
--font-d-color:#bfbfbf;
--li-ba-color:#acbcbe;
--a-color:#62899d; /*цвет ссылок*/
--filterCB-filter:contrast(90%) brightness(90%);
--Bshadow-box-shadow: 0rem 0rem .3rem rgba(201,201,201,.21);
}
</style>
codepen
Комментарии