Переключатель темной и светлой тем с использованием переменных CSS и JavaScript

  ✎ PERSHYTUT  

Переменные CSS дают исключительную возможность создавать темы и легко переключать темы для веб-сайтов. Изменение цветовых схем современных веб-сайтов становится намного проще с помощью простого CSS и нескольких строк JavaScript.

Давайте взглянем на создание простого переключателя тем, используя CSS-переменные и чистый JavaScript. Такой подход упрощает реализацию переключения тем в любых интерфейсных фреймворках.

Пример для сайта

Единство стиля в дизайне подразумевает узнаваемость, а не скучный шаблонный вид для всех разделов, рубрик, страниц сайта. Узнаваемость выражается в стиле, деталях оформления и необходима для продвижения бренда, а набор отличных по дизайну страниц нельзя назвать стильным дизайном

HTML разметка кнопки переключения 
 
   <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

Комментарии

Отправить комментарий