Виникла в мене потреба поставити на сайт кнопку для перемикання між світлим і темним режимами. Трохи покопавшись, я все зробив, і аж тоді знайшов підказку на власному блозі 😀
Але порівнявши обидва варіанти, бачу, що новий трішки цікавіший – підключення стилів відбувається правильним “вордпресівським” способом, а кольори в CSS вказуються за допомогою змінних, що значно спрощує код.
JavaScript
Отож, що ми робимо? Створюємо файл cookies.js у каталозі assets/js та додаємо в нього три функції для роботи з cookies. Схоже до двох функцій у попередній статті, але розміщую те, що знайшов цього разу:
function set_cookie (name, value, exp_y, exp_m, exp_d, path, domain, secure) {
var cookie_string = name + "=" + escape (value);
if (exp_y) {
var expires = new Date (exp_y, exp_m, exp_d);
cookie_string += "; expires=" + expires.toGMTString();
}
if (path)
cookie_string += "; path=" + escape (path);
if (domain)
cookie_string += "; domain=" + escape (domain);
if (secure)
cookie_string += "; secure";
document.cookie = cookie_string;
}
function delete_cookie (cookie_name) {
var cookie_date = new Date (); // Текущая дата и время
cookie_date.setTime (cookie_date.getTime() - 1);
document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}
function get_cookie (cookie_name)
{
var results = document.cookie.match ('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
if (results)
return (unescape (results[2]));
else
return null;
}
Нижче дописуємо функцію для встановлення куки, яку будемо “вішати” на клац по кнопці:
function darkMode() {
if (!get_cookie('dark-mode') || get_cookie('dark-mode') == 'no') {
set_cookie('dark-mode', 'yes', 0x7FFFFFFF);
document.location.reload(true);
}
else {
set_cookie('dark-mode', 'no', 0x7FFFFFFF);
document.location.reload(true);
}
}
Що тут відбувається: коли ти клацаєш по заданій кнопці, вона викликає дану функцію. Функція перевіряє, чи встановлене значення куки “dark-mode”. Якщо не встановлене, або її значення – “no”, їй присвоюється значення “yes”. В іншому випадку (а іншим випадком у нас може бути тільки встановлене значення “yes”) кука “dark-mode” отримує значення “no”. Такий код дозволяє організувати власне ефект кнопки-перемикача.
Підключення стилів та скриптів
Тепер треба приєднати даний скрипт. У файлі шаблона functions.php додаємо такий код:
wp_enqueue_script( 'ivaniurablog-cookies', get_template_directory_uri() . '/assets/js/cookies.js', array(), _S_VERSION, true );
Також підключаємо необхідний файл стилів:
if (!$_COOKIE['dark-mode'] || $_COOKIE['dark-mode'] == 'no') {
wp_enqueue_style( 'ivaniurablog-light-style', get_template_directory_uri() . '/assets/css/light.css', array(), _S_VERSION);
}
if ($_COOKIE['dark-mode'] == 'yes') {
wp_enqueue_style( 'ivaniurablog-dark-style', get_template_directory_uri() . '/assets/css/dark.css', array(), _S_VERSION);
}
Залежно від того, яке значення cookie встановлене, буде підключатися той чи інший файл стилів.
Кнопка
Далі переходимо у файл шаблона, де буде розміщена кнопка. Я роблю її у верхній частині сайту, тому відкриваю файл header.php і вставляю, де потрібно, наступний код:
<a class="darkmode-checker" onclick="darkMode()">
<?php if (!$_COOKIE['dark-mode'] || $_COOKIE['dark-mode'] == 'no') : ?>
<span class="dark"></span>
<?php elseif ($_COOKIE['dark-mode'] == 'yes') : ?>
<span class="light"></span>
<?php endif; ?>
</a>
Тут усе зрозуміло: створюється посилання, клацання по якому викликає створену вище функцію darkMode(). А всередині нього в залежності від значення куки додається елемент span із класом dark або light. Ці два класи будемо зараз оформлювати.
Оформлення кнопки
Я на початку проговорився, що будуть використовуватися CSS-змінні. Так от, ними ми позначимо для початку основний колір шрифта та загальний фоновий колір сайту. З часом ти собі додаси більше стилів, для тесту поки що вистачить.
Отже, в основному файлі стилів задаємо дві змінні для основного кольору та фону:
body {
color: var(--main-color);
background: var(--main-bg-color);
}
Створюємо додатковий файл стилів /assets/css/light.css для світлого оформлення сайту та кнопки:
:root {
--main-color: #282C34;
--main-bg-color: #fff;
}
.dark {
display: block;
width: 5em;
height: 2.5em;
border: var(--main-color) 0.2em solid;
border-radius: 5em;
}
.dark:before {
content: "";
display: block;
width: 2.3em;
height: 2.3em;
border-radius: 50%;
background: var(--main-color);
margin-top: -0.1em;
margin-left: -0.1em;
}
.dark:after {
content: "\f186";
font-family: "Font Awesome 5 Free";
font-weight: 700;
position: absolute;
font-size: 1.3em;
margin-top: -1.6em;
margin-left: 2.1em;
color: var(--main-color);
}
І ще один файл /assets/css/dark.css для темного оформлення:
:root {
--main-color: #bebebe;
--main-bg-color: #282C34;
}
.light {
display: block;
width: 5em;
height: 2.5em;
border: var(--main-color) 0.2em solid;
border-radius: 5em;
}
.light:before {
content: "\f185";
font-family: "Font Awesome 5 Free";
font-size: 1.3em;
font-weight: 700;
color: var(--main-color);
position: absolute;
margin-top: 0.1em;
margin-left: 0.5em;
}
.light:after {
content: "";
display: block;
position: absolute;
width: 2.3em;
height: 2.3em;
border-radius: 50%;
background: var(--main-color);
margin-top: -0.1em;
margin-left: 2.4em;
}
Переконайся, що в тебе підключений значковий шрифт FontAwesome. Кнопки повинні виглядати ось так:
Готово. Тепер клац по кнопці перемикатиме в cookies значення, яке буде впливати на вибір одного з двох css-файлів.
Мінус такого підходу – після кліку по кнопці відбувається примусове перезавантаження сторінки. Варіант без перезавантаження на основі localStorage буде описаний у наступній статті. Заходь 😉
Прокоментувати