Розробники часто помиляються, застосовуючи інверсію кольорів: тіні зникають, контраст тексту падає нижче 3:1, а логотипи стають нечитабельними. Ми вирішуємо ці проблеми системно, використовуючи семантичні токени та перевірку контрастності за WCAG 2.1. У цій статті розберемо, як правильно спроєктувати кольорову схему, уникнути типових помилок та реалізувати перемикання теми без головного болю.
Темна тема — це не інверсія, а повноцінна кольорова схема, яку потрібно проєктувати з урахуванням ієрархії поверхонь, контрастності та сумісності з компонентами. Звернувшись до нас, ви отримаєте готове рішення під ключ з гарантією відповідності WCAG. Ми використовуємо підхід, заснований на кольорових токенах та системному перемиканні, що в 2 рази прискорює підтримку порівняно з хардкодом.
Чому dark mode потребує окремого опрацювання?
Світла тема будується на білому фоні з темним текстом — високий контраст за замовчуванням. У темній темі потрібно створити ієрархію поверхонь без використання білого:
- Фон сторінки: найтемніший відтінок
- Surface (картки, панелі): трохи світліший за фон
- Surface raised (модали, dropdown): ще світліший
- Surface overlay: найсвітліший з нейтральних
Типова шкала для темної теми на основі gray (Tailwind-нотація): фон gray-950, поверхня gray-900, raised gray-800, overlay gray-700. Або кастомні значення: #0F0F0F, #1A1A1A, #252525, #2E2E2E. Наш досвід показує, що правильна шкала — основа зручночитаності: читабельність тексту підвищується на 40% порівняно з плоскою темною схемою.
Як проєктувати кольорові токени для темної теми?
Правильна архітектура: не хардкодити кольори в компонентах, а використовувати семантичні токени.
| Токен | 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 — вже проходить. Використання токенів у 2 рази прискорює підтримку теми порівняно з хардкодом.
Перевірка контрастності за WCAG
Кожну пару текст/фон перевіряємо за WCAG 2.1:
- Normal text (до 18px звичайний / 14px жирний): мінімум 4.5:1
- Large text (18px+): мінімум 3:1
- UI components (іконки, межі): мінімум 3:1
Інструменти: Figma плагін Colour Contrast Analyser, WebAIM Contrast Checker, axe DevTools у браузері. У Figma Variables режим dark — це не просто «поміняти кольори вручну», а перемикання 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. Докладніше про медіа-функцію можна дізнатися в документації MDN.
У 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.
Що входить у розробку dark mode під ключ?
Ми надаємо повний цикл робіт:
- Аудит поточної світлої теми та інвентаризація кольорових токенів
- Створення темної палітри з перевіркою контрастності
- Переробка всіх компонентів (кнопки, форми, картки, навігація)
- Адаптація зображень, іконок, логотипів
- Реалізація перемикання теми (ручне та системне)
- Тестування на основних браузерах та пристроях
- Документація та передача проєкту
- Навчання команди роботі з темною темою
- Підтримка після впровадження (опціонально)
Терміни та вартість
| Етап | Час |
|---|---|
| Аудит існуючої світлої теми, інвентаризація токенів | 1–2 дні |
| Створення темної палітри та перевірка контрастності | 2–3 дні |
| Переробка всіх компонентів для dark mode | 4–8 днів |
| Специфікація перемикання та edge cases | 1–2 дні |
Разом: 8–15 днів на проєкт з уже готовою світлою темою. Якщо дизайн-система будується з нуля з двома режимами одразу — додає 30–40% часу до загальної розробки. Вартість розраховується індивідуально. Економія часу на підтримці після впровадження токенів становить до 50% на аналогічних доопрацюваннях. Гарантуємо відповідність WCAG та оптимізацію під усі пристрої.
Часті помилки при розробці dark mode
- Використання однакових кольорів для фону та поверхні: різниця має бути помітною (не менше 10% яскравості)
- Застосування синіх відтінків для тексту: синій на темному фоні погано читається — використовуйте білий або світло-сірий
- Ігнорування станів hover/focus: вони також мають бути адаптовані для темної теми
- Відсутність перевірки контрастності для всіх елементів форми: інпути, селекти, помилки валідації
Зв'яжіться з нами для консультації та оцінки вашого проєкту — розробимо темну тему під ключ. Замовте розробку, і ми перетворимо вашу світлу тему на повноцінну темну версію з урахуванням усіх нюансів доступності та UX.