Як створити просте перемикання кольорового оформлення сайту (CSS та JavaScript)

Якщо ви хочете додати на свій сайт можливість перемикання між світлим/темним режимом кольорового оформлення, тоді ви потрапили за адресою. Хоча така «фіча» може і не користуватися попитом, але з її наявністю у вас буде більш розширений функціонал. Тож, в цьому практичному уроці ми обговоримо, як реалізувати просту зміну колірної схеми (перемикання на світлий режим або темний режим) на вашому вебсайті з допомогою CSS змінних та лише кількох рядків JavaScript.

Додавання функціоналу перемикання режиму, по суті, зводиться до простої зміни стильового оформлення (CSS стилів) і навіть без необхідності зміни макету сайту. І за подібним принципом ви можете легко змінювати оформлення сайту і, наприклад, приурочити це до певної події, пори дня, певного свята, тощо.

Вступне теоретичне слово

Загалом принцип перемикання активується простою зміною класів та CSS стилів для кореневого елементу <html>, або ж іншого (проте максимально вищого в DOM) елементі. Хоча бажано врахувати й інші важливі моменти:

Відвідувачі вашого сайту повинні мати можливість самостійно перемикати колірну тему
Колірну схему сайту можна обирати автоматично на основі системних налаштувань, та/або переваг браузера
Повинно бути визначення дефолтне значення (колірна схема за замовчуванням)
Бажано зберігати налаштування теми (запам’ятовувати обрану схему кольорів), щоб при переході на інші сторінки вибір користувача не «обнулився»

Це основні вимоги, тепер давайте заглибимося в деталі та розглянемо практичні рішення!

CSS стилізація сторінки на основі обраної теми

Отже, зміна теми відбувається зі зміною класу кореневого елемента. Для прикладу я використовую дві кнопки з типом button, при натисканні на які змінюється клас елемента <html> на day/night одним рядком коду JavaScript.

Ось так може виглядати приблизно подібний код:

<div class="switch-block">
  <button aria-label="Оберіть світлу тему" type="button" class="theme-btn light" onclick="setColorScheme('day')">Світла тема</button>
  <button aria-label="Оберіть темну тему" type="button" class="theme-btn dark" onclick="setColorScheme('night')">Темна тема</button>
</div>
<script>
  const setColorScheme = theme => document.documentElement.className = theme;
</script>

Деякі пояснення по коду:

Я використовую два атрибути доступності ARIA (Accessible Rich Internet Applications), які зроблять ці кнопки більш доступними для людей з обмеженими можливостями. Зміна кольорів може не мати значення для людей з порушеннями зору, але програма зчитування з екрану допоможе їм краще зорієнтуватися на сайті. Атрибути aria-label приховані від користувачів, але доступні допоміжним технологіям.

За замовчуванням можна додати певний клас до кореневого <html> елементу.

При натисканні на кнопки простий JavaScript змінює клас кореневого тега. А далі вже потрібно задіювати CSS стилі на основі цих класів.

Перемикання кольорових тем сайту — CSS стилі

В даному прикладі я використовую доволі просте рішення — зміну кольорової схеми сайту лише кількома найпростішими стилями. Також, врахував значення за замовчуванням, коли користувач не натискав кнопку вибору теми. При зміні кореневого класу тег body змінює значення стилів відповідно для змінних фонового кольору та кольору тексту.

<style>
  :root,
  :root.day {
    --bg-color: #fff;
    --text-color: #0c0c0c;
  }
  :root.night {
    --bg-color: #121212;
    --text-color: #fff;
  }
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
</style>

Як обрати тему автоматично в залежності від налаштувань користувача

В попередньому коді я прописав стилі для класів, що так чи інакше будуть обрані користувачем. Але щоб розширити даний функціонал, ми також можемо обирати світлий/темний режим на основі налаштувань системи користувача. Для цього можна використати медіа-запит prefers-color-scheme, — CSS функції, яка визначає використовувану тему в операційній системі. Приклад використання:

<style>
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-color: #121212;
      --text-color: #fff;
    }
  }
</style>

В цьому медіа-запиті я встановлюю для змінної :root бажані кольори для темного режиму. Функція медіа-запиту CSS prefers-color-scheme може мати одне з трьох значень: світлий (light), темний (dark), без налаштувань (no-preference).

Іншим варіантом буде використання CSS функції light-dark(), яка приймає лише два аргументи і повертає один із них залежно від того, яку тему вибрав користувач:

<style>
  body {
    color: light-dark(#121212, #ffffff);
    background-color: light-dark(#ffffff, #121212);
  }
</style>

Перше значення функція поверне, якщо у користувача встановлена світла тема (або тема не обрана), а друге, — якщо встановлена темна тема.

Щоб функція light-dark() запрацювала, потрібно прописати властивість color-scheme зі значенням light dark. Зазвичай це роблять для псевдокласу :root. Якщо цю властивість не прописати, то функція завжди повертатиме лише перше значення:

<style>
  :root {
    color-scheme: light dark;
  }
</style>

Як зберегти вибір користувачем теми в локальному сховищі

Коли відвідувач переходить зі сторінки на сторінку вашого сайту, обрана тема не повинна змінюватися. Одним із варіантів вирішення цього завдання буде збереження стану колірної теми сайту, щоб його можна було потім використати на інших сторінках сайту. Найкраще зберігати цей стан в локальному сховищі (localStorage) браузера. Щоразу, коли сторінка сайту буде завантажуватись, з локального сховища буде завантажуватись значення для обраної теми. Код для цього рішення може мати наступний вигляд:

<script>
  const setColorScheme = (theme) => {
    document.documentElement.className = theme; // отримати значення поточної теми з розмітки
    localStorage.setItem('themeScheme', theme); // зберегти значення поточної теми до локального сховища
  }
  const getColorScheme = () => {
    const theme = localStorage.getItem('themeScheme'); //  повернути значення поточної теми з локального сховища
    theme && setColorScheme(theme); // встановити поточну тему відповідно до локального сховища
  }
  getColorScheme(); // запуск функції щоразу при завантаженні сторінки
</script>

Під час кожного відвідування сторінок сайту, перша функція буде зберігати вибрану користувачем тему кольорової схеми в локальному сховищі. Далі, щоразу буде викликатися друга функція, що буде синхронізувати дані з локального сховища та поточного налаштування.

Підтримка розглянутого функціоналу браузерами

Рішення, які я описав вище, покладаються на сучасні функції браузерів. За деякими статистичними даними, не підтримують новітні рішення в CSS/JS лише трохи більше за 10% браузерів. Відповідно, щоб все працювало гарно, — бажано використовувати найновіші браузери.

Замість висновку

Тож, в сьогоднішньому практичному уроці ми розглянули основні моменти по створенню простого перемикача кольорового оформлення сайту. З допомогою лише невеликого коду CSS та декількох рядків JavaScript. Щоб створити перемикач світла/темна тема, достатньо зробити 3 наступні кроки:

Викликати JS функції через відповідні HTML елементи (наприклад, кнопки)
Використовувати скрипт JavaScript, щоб змінювати клас кореневого елементу <html>. Додатково можна записувати поточний стан до локального сховища (localStorage)
На основі класу встановити кольори теми для кореневого елементу :root (<html>) за допомогою змінних CSS

Ось і все на сьогодні, дякую за увагу!