Як зробити темну тему на сайті

Створення Темної Теми на Сайті: Повний Посібник

Темна тема, або dark mode, стала невід’ємною частиною сучасного веб-дизайну та користувацького досвіду. Вона не тільки надає сайту елегантний і сучасний вигляд, але й пропонує низку практичних переваг: зменшує напругу для очей в умовах слабкого освітлення, допомагає економити заряд батареї на пристроях з OLED-дисплеями та забезпечує комфортніший перегляд контенту. Створення якісної темної теми вимагає продуманого підходу до дизайну та технічної реалізації. У цій статті ми розглянемо, як ефективно впровадити темну тему на сайті, використовуючи сучасні підходи.

Чому темна тема важлива?

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

**Зменшення напруги на очі:** Яскравий екран у темряві може викликати дискомфорт. Темна тема значно знижує світлове навантаження на очі користувача.
**Енергозбереження:** На пристроях з OLED-дисплеями темні пікселі споживають менше енергії, що продовжує час автономної роботи.
**Естетика та сучасність:** Багато користувачів віддають перевагу темним інтерфейсам, вважаючи їх більш привабливими та технологічними.
**Доступність:** Для деяких людей з певними порушеннями зору, темний текст на світлому фоні або світлий текст на темному фоні може бути легше сприймати.

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

Підходи до Впровадження Темної Теми

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

Автоматична темна тема з `prefers-color-scheme`

Найпростіший і найбільш елегантний спосіб впровадити темну тему – це використовувати медіа-запит `prefers-color-scheme` в CSS. Цей запит дозволяє вашому сайту автоматично адаптуватися до налаштувань світлої або темної теми, встановлених в операційній системі користувача (macOS, Windows, Android, iOS). Це означає, що якщо користувач обрав темну тему на своєму комп’ютері чи телефоні, ваш сайт автоматично відображатиметься в темному режимі без жодних додаткових дій з боку користувача.

Реалізація dark mode css за допомогою `prefers-color-scheme`

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

Приклад базових стилів для світлої теми:

body {
background-color: #ffffff; /* Світлий фон */
color: #333333; /* Темний текст */
transition: background-color 0.3s ease, color 0.3s ease;
}
a { color: #007bff; }

Тепер додаємо стилі для dark mode css:

@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a; /* Дуже темний фон */
color: #f0f0f0; /* Світлий текст */
}
a { color: #8ecae6; }
/* Додаткові стилі для темної теми */
h1, h2, h3 { color: #ffffff; }
p { color: #cccccc; }
.card {
background-color: #2c2c2c;
border-color: #444444;
}
}

У цьому прикладі, коли система користувача перебуває в темному режимі, браузер автоматично застосує стилі всередині `@media (prefers-color-scheme: dark)`. Важливо переконатися, що всі елементи, які мають змінювати колір (текст, фон, рамки, іконки тощо), мають визначені стилі як для світлої, так і для темної теми. Зверніть увагу на використання `transition`, яке робить перемикання між темами плавним та приємним для ока.

Ручне перемикання теми (toggle)

Незважаючи на зручність `prefers-color-scheme`, користувачі часто бажають мати можливість вручну перемикати тему незалежно від системних налаштувань. Це дає їм повний контроль над зовнішнім виглядом сайту. Для цього зазвичай використовується JavaScript для додавання або видалення спеціального класу (наприклад, `dark-theme`) до кореневого елемента сайту (зазвичай `body` або `html`) і CSS для стилізації цього класу.

Реалізація темна тема сайт за допомогою JavaScript і CSS класів

Цей підхід складається з трьох основних частин:

**Кнопка перемикання:** Елемент на сторінці, який викликає функцію JavaScript.
**JavaScript:** Скрипт, що перемикає клас і зберігає вибір користувача.
**CSS:** Стилі, які застосовуються, коли клас `dark-theme` присутній.

CSS для ручного перемикання

Визначте свої базові стилі для світлої теми, а потім створіть окремий блок CSS, який застосовуватиметься, коли до елемента `body` додано клас `dark-theme`.

/* Базові стилі для світлої теми */
body {
background-color: #ffffff;
color: #333333;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button { background-color: #007bff; color: white; }

/* Стилі для темної теми, коли body має клас .dark-theme */
body.dark-theme {
background-color: #1a1a1a;
color: #f0f0f0;
}
body.dark-theme h1, body.dark-theme h2 { color: #ffffff; }
body.dark-theme .button { background-color: #8ecae6; color: #1a1a1a; }
body.dark-theme .card {
background-color: #2c2c2c;
border-color: #444444;
}

JavaScript для перемикання і збереження теми

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

Приклад простого JavaScript коду:

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
// Функція для встановлення теми
function setTheme(theme) {
if (theme === 'dark') {
body.classList.add('dark-theme');
localStorage.setItem('theme', 'dark');
} else {
body.classList.remove('dark-theme');
localStorage.setItem('theme', 'light');
}
}
// Перевірка попереднього вибору користувача або системних налаштувань
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme);
} else if (prefersDarkScheme.matches) {
setTheme('dark');
} else {
setTheme('light');
}
// Обробник подій для кнопки перемикання
if (themeToggle) {
themeToggle.addEventListener('click', () => {
if (body.classList.contains('dark-theme')) {
setTheme('light');
} else {
setTheme('dark');
}
});
}
// Додатково: слухаємо зміни системних налаштувань під час роботи сайту
prefersDarkScheme.addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) { // Якщо користувач не вибирав вручну
setTheme(e.matches ? 'dark' : 'light');
}
});

Цей JavaScript код робить наступне:

Визначає поточну тему на основі `localStorage` (якщо користувач вже обирав) або системних налаштувань (`prefers-color-scheme`).
Встановлює початкову тему.
Додає обробник подій до кнопки з `id=”theme-toggle”`, який перемикає клас `dark-theme` на `body` та зберігає вибір у `localStorage`.
Слухає зміни системних налаштувань теми в реальному часі, але тільки якщо користувач не зробив свій вибір вручну.

Комбінований підхід: Автоматика + Ручне керування

Найкращий підхід – це поєднання обох методів. За замовчуванням сайт адаптується до системних налаштувань користувача. Однак, якщо користувач вручну перемикає тему на сайті, його вибір зберігається і має пріоритет над системними налаштуваннями. Це забезпечує максимальний комфорт і контроль для користувача.

Наведений вище JavaScript вже включає логіку комбінованого підходу: він спочатку перевіряє `localStorage` (ручний вибір), а потім `prefers-color-scheme` (системні налаштування).

Важливі Міркування та Кращі Практики

Плавні переходи

Використовуйте CSS-властивість `transition` для плавної зміни кольорів та фонів при перемиканні між темами. Це значно покращує користувацький досвід.

body {
transition: background-color 0.4s ease, color 0.4s ease;
}
.element {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

Уникнення “мерехтіння” (FOUC – Flash of Unstyled Content)

Якщо ви використовуєте JavaScript для встановлення теми на основі `localStorage`, може виникнути коротке “мерехтіння”, коли сторінка спочатку завантажується зі світлою темою, а потім швидко перемикається на темну. Щоб уникнути цього, можна:

**Вбудувати JavaScript:** Перемістіть скрипт, який перевіряє `localStorage` і встановлює клас `dark-theme`, якомога вище в розділі `head` вашого документа.
**CSS-змінні:** Використовуйте CSS-змінні (custom properties). Це дозволяє визначати кольори один раз і легко їх змінювати для різних тем, зменшуючи обсяг коду та спрощуючи керування.

Приклад з CSS-змінними:

:root {
--primary-bg: #ffffff;
--primary-text: #333333;
--secondary-bg: #f5f5f5;
}
body {
background-color: var(--primary-bg);
color: var(--primary-text);
}
@media (prefers-color-scheme: dark) {
:root {
--primary-bg: #1a1a1a;
--primary-text: #f0f0f0;
--secondary-bg: #2c2c2c;
}
}
body.dark-theme {
--primary-bg: #1a1a1a;
--primary-text: #f0f0f0;
--secondary-bg: #2c2c2c;
}

Цей підхід робить керування кольорами дуже гнучким. Ви можете визначити всі ваші кольори як змінні і потім просто перевизначити ці змінні для темної теми, як за допомогою `prefers-color-scheme`, так і за допомогою класу `dark-theme`.

Тестування

Ретельно тестуйте темну тему на різних пристроях, браузерах та в різних умовах освітлення. Зверніть увагу на дрібні деталі, такі як тіні, рамки, стани ховеру та фокусу, а також відображення вбудованого контенту (наприклад, відео YouTube або карти Google).

Висновок

Створення темної теми для вашого сайту – це значний крок до покращення користувацького досвіду та адаптації до сучасних трендів веб-дизайну. Використовуючи dark mode css за допомогою `prefers-color-scheme` та/або JavaScript для ручного перемикання, ви можете надати користувачам гнучкість та комфорт, яких вони очікують.

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

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