Розробка темної теми (Dark Mode) сайту
Dark mode — це не інверсія кольорів. Це окрема кольорова схема, яку треба проектувати так само ретельно, як світлу. Проста інверсія (filter: invert(1)) дає неприйнятний результат: фото з негативом, логотипи чорно-білими, кольорові акценти інвертованими. Правильний dark mode — це переробка кожного кольорового токена.
Чому dark mode складніше, ніж здається
Світла тема будується на білому фоні з темним текстом — високий контраст за замовчуванням. У темній темі треба створити ієрархію поверхонь без використання білого:
- Фон сторінки: найтемніший відтінок
- Surface (карточки, панелі): трохи світліше фону
- Surface raised (модалі, dropdown): ще світліше
- Surface overlay: найсвітліший з нейтралів
Типова шкала для темної теми на основі gray (Tailwind-нотація): фон gray-950, поверхня gray-900, raised gray-800, overlay gray-700. Або власні значення: #0F0F0F, #1A1A1A, #252525, #2E2E2E.
Проектування через токени
Правильна архітектура: не hardcoding кольорів у компонентах, використовуйте семантичні токени.
| Токен | Light | Dark |
|---|---|---|
--color-bg-primary |
#FFFFFF |
#0F0F10 |
--color-bg-surface |
#F9FAFB |
#1C1C1E |
--color-bg-raised |
#FFFFFF |
#2C2C2E |
--color-text-primary |
#111827 |
#F9FAFB |
--color-text-secondary |
#6B7280 |
#9CA3AF |
--color-text-disabled |
#D1D5DB |
#4B5563 |
--color-border-default |
#E5E7EB |
#374151 |
--color-accent-primary |
#2563EB |
#3B82F6 |
Зверніть увагу: акцентний колір у dark mode зміщується на світліший відтінок. blue-700 на білому фоні контрастний. Той же blue-700 на gray-900 — ні: контраст за WCAG AA вимагає мінімум 4.5:1 для основного тексту. blue-500 на gray-900 — вже проходить.
Перевірка контрастності
Перевірте кожну пару текст/фон за WCAG 2.1:
- Звичайний текст (до 18px звичайний / 14px bold): мінімум 4.5:1
- Великий текст (18px+): мінімум 3:1
- UI-компоненти (іконки, границі): мінімум 3:1
Інструменти: Figma плагін Colour Contrast Analyser, WebAIM Contrast Checker, axe DevTools у браузері. У Figma Variables темний режим — це не просто «поміняти кольори вручну», а перемикання Variable Mode.
Специфіка темних тем: тені, зображення, іконки
Тені в dark mode не працюють: тінь box-shadow: 0 4px 16px rgba(0,0,0,0.1) на темному фоні невидима. Заміна: border: 1px solid var(--color-border-default) або світліша поверхня (elevation через колір, не тінь).
Зображення й фото зазвичай залишають без змін. Іноді додають невелике затемнення: filter: brightness(0.85) — щоб яскраві фото не «виділялися» на темному фоні.
Іконки — SVG з currentColor наслідують колір тексту автоматично. PNG і растрові іконки — окремий набір або фільтрація.
Логотипи — часто потрібна світла версія логотипа для темного фону. Окремий ассет, не автоматичне перемикання.
Реалізація перемикання
Перемикання теми реалізується через CSS-клас на <html>:
:root { --color-bg: #fff; }
html.dark { --color-bg: #0f0f10; }
Або через prefers-color-scheme media query для автоматичного режиму системи. Найкраща практика — обидва варіанти: системні переваги за замовчуванням + ручне перемикання зі збереженням у localStorage.
У Figma Variables → Modes: створіть режими Light і Dark для кожної колекції токенів. Перемикання відбувається у прототипі через Variable Mode Interaction.
Особливі випадки: графіки, карти, медіа
Графіки (Chart.js, Recharts, D3) вимагають окремих кольорових палітр для dark mode. Темні серії даних на світлому фоні не читаються на темному. Зазвичай потрібні 2 набори кольорів серій.
Карти (Google Maps, Mapbox) — перемикання на темний стиль через окремий mapId або style. Mapbox: style: 'mapbox://styles/mapbox/dark-v11'. Google Maps: окремий mapId з темним стилем через Cloud Console.
Терміни
| Етап | Час |
|---|---|
| Аудит існуючої світлої теми, інвентаризація токенів | 1–2 дні |
| Створення темної палітри й перевірка контрастності | 2–3 дні |
| Переробка всіх компонентів для dark mode | 4–8 днів |
| Специфікація перемикання й edge cases | 1–2 дні |
Всього: 8–15 днів на проект з готовою світлою темою. Якщо дизайн-система будується з нуля з двома режимами відразу — додає 30–40% до загального часу розробки дизайну.