M

MLOG

Українська

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

Функція CSS Light-Dark: Автоматична адаптація теми для глобального вебу

У сучасному глобально пов'язаному світі вебсайти мають бути доступними та візуально привабливими для користувачів з різним походженням та вподобаннями. Один з найефективніших способів досягти цього — автоматична адаптація теми, зокрема пропонування світлої та темної тем, що налаштовуються відповідно до системних налаштувань користувача. Ця стаття допоможе вам реалізувати цю функціональність за допомогою CSS-медіазапитів та кастомних властивостей, забезпечуючи безшовний та комфортний досвід перегляду для вашої міжнародної аудиторії.

Навіщо впроваджувати автоматичні світлу та темну теми?

Існує кілька вагомих причин для включення автоматичної адаптації теми у ваші вебпроєкти:

Як реалізувати автоматичну адаптацію теми за допомогою CSS

В основі автоматичної адаптації теми лежить медіазапит prefers-color-scheme. Цей CSS-медіазапит дозволяє вам визначити бажану колірну схему користувача (світлу або темну) та застосувати відповідні стилі.

Крок 1: Визначте кастомні властивості (CSS-змінні)

Почніть з визначення кастомних властивостей (CSS-змінних) для зберігання значень кольорів для вашої світлої та темної тем. Це полегшує перемикання між темами шляхом простого оновлення значень змінних.


:root {
  --background-color: #ffffff; /* Фон світлої теми */
  --text-color: #000000; /* Текст світлої теми */
  --link-color: #007bff; /* Посилання світлої теми */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Фон темної теми */
    --text-color: #ffffff; /* Текст темної теми */
    --link-color: #66b3ff; /* Посилання темної теми */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

У цьому прикладі ми визначаємо змінні для кольору фону, тексту, посилань та кнопок. Селектор :root застосовує ці змінні до всього документа. Медіазапит @media (prefers-color-scheme: dark) потім перевизначає ці змінні значеннями для темної теми, коли користувач встановив темний режим у своїй системі.

Крок 2: Застосуйте кастомні властивості до ваших стилів

Далі застосуйте ці кастомні властивості до ваших CSS-стилів, щоб керувати виглядом елементів вашого вебсайту.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Плавний перехід */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Тут ми використовуємо функцію var() для доступу до значень наших кастомних властивостей. Ми також додали властивість transition до елемента body для створення плавного переходу між темами.

Крок 3: Тестування та вдосконалення

Ретельно протестуйте вашу реалізацію в різних браузерах та операційних системах. Сучасні браузери, такі як Chrome, Firefox, Safari та Edge, повністю підтримують медіазапит prefers-color-scheme. Ви можете перемикатися між світлим та темним режимами в налаштуваннях вашої операційної системи, щоб побачити зміни на вашому вебсайті.

Просунуті техніки та рекомендації

Надання ручного перемикача тем

Хоча автоматична адаптація теми є чудовою відправною точкою, деякі користувачі можуть захотіти вручну змінити системні налаштування. Ви можете надати ручний перемикач теми за допомогою JavaScript та локального сховища.

HTML:


<button id="theme-toggle">Перемкнути тему</button>

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // За замовчуванням - авто

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Застосувати початкову тему при завантаженні сторінки
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Якщо встановлено авто, дозволити prefers-color-scheme вирішити
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Додайте наступний CSS разом із попереднім. Зверніть увагу на ручне перевизначення:


body.light-theme {
  --background-color: #ffffff; /* Фон світлої теми */
  --text-color: #000000; /* Текст світлої теми */
  --link-color: #007bff; /* Посилання світлої теми */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Фон темної теми */
  --text-color: #ffffff; /* Текст темної теми */
  --link-color: #66b3ff; /* Посилання темної теми */
  --button-background-color: #333;
  --button-text-color: #fff;
}

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

Обробка зображень та SVG

Деякі зображення та SVG можуть погано виглядати як у світлій, так і в темній темі. Ви можете використовувати CSS-медіазапити для умовного відображення різних версій цих ресурсів.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Цей фрагмент коду показує одне зображення (з класом light-mode) у світлому режимі та інше зображення (з класом dark-mode) у темному режимі.

Рекомендації щодо палітри кольорів для міжнародної аудиторії

Вибираючи палітри кольорів для світлої та темної тем, пам'ятайте про культурні асоціації та міркування доступності. Ось деякі загальні рекомендації:

Рекомендації щодо продуктивності

Хоча реалізація автоматичної адаптації теми є відносно простою, важливо враховувати потенційний вплив на продуктивність. Уникайте надто складних CSS-селекторів або анімацій, які можуть сповільнити рендеринг. Також переконайтеся, що ваші кастомні властивості визначені ефективно, щоб мінімізувати накладні витрати на пошук змінних.

Ось деякі найкращі практики для оптимізації продуктивності:

Найкращі практики доступності

Переконайтеся, що ваші світла та темна теми відповідають рекомендаціям з доступності, таким як WCAG (Web Content Accessibility Guidelines). Це включає забезпечення достатнього контрасту кольорів, використання семантичного HTML та забезпечення доступності всіх інтерактивних елементів з клавіатури.

Ось деякі конкретні найкращі практики доступності, яких варто дотримуватися:

Приклади для різних регіонів

Розгляньте ці приклади того, як світлі та темні теми можна адаптувати для різноманітних глобальних аудиторій:

Висновок

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

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