Як додати темну тему до сайту або застосунку (без білого спалаху)

Щоб додати темну тему, визначте кольори як іменовані токени (фон, текст, поверхня, межа, акцент) замість жорстко прописаних значень, задайте кожному токену світле та темне значення й перемикайтеся між ними за допомогою медіа-функції CSS prefers-color-scheme, щоб сайт слідував системному налаштуванню відвідувача. Якщо потрібен і ручний перемикач, зберігайте вибір у браузері та застосовуйте його крихітним вбудованим скриптом у head сторінки, щоб не було білого спалаху під час завантаження. Потім перевірте контраст, зображення та графіки в обох темах. У конструкторі застосунків на базі ШІ більшість цього можна зробити одним чітким промптом; якість визначає саме перевірка.

Два підходи

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

Почніть із токенів кольорів

Темна тема створює труднощі, коли кольори розкидані по коду як white, #333 і gray-100. Усе просто, коли кожен колір походить із невеликого набору іменованих токенів:

Кожен компонент використовує назви токенів. Тоді перемикання теми означає заміну одного набору значень, а не редагування кожного компонента.

Поради для темної палітри:

• Уникайте чистого чорного та чистого білого для великих ділянок; дуже темно-сірий і не зовсім білий легше читати.
• Показуйте глибину світлішими поверхнями, а не тінями — тіні на темному фоні майже не видно.
• Трохи знижуйте насиченість яскравих кольорів бренду; на темному фоні вони можуть неприємно світитися.
• Тримайте контраст читабельним. Рівень AA у WCAG вимагає контрасту щонайменше 4,5:1 для звичайного тексту. Сірий приглушений текст у темних темах часто його не витримує.

З Tailwind CSS

Tailwind — інструмент стилізації за замовчуванням у багатьох застосунках, створених за допомогою ШІ. Згідно з документацією Tailwind про темну тему, варіант dark: за замовчуванням використовує prefers-color-scheme, тому класи на кшталт bg-white dark:bg-gray-900 слідують системному налаштуванню без додаткових зусиль.

Для ручного перемикача в Tailwind v4 документація показує, як перевести варіант на клас батьківського елемента:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Далі застосунок додає або прибирає клас dark на кореневому елементі. Документація також пропонує вбудований скрипт у head, який застосовує збережений вибір (або системне налаштування) до того, як сторінка відмальовується, — саме так і уникають спалаху.

Як уникнути білого спалаху

Спалах виникає тому, що сторінка малюється у світлій темі, потім завантажується JavaScript, зчитує збережений вибір і перемикає на темну. Виправлення:

1. Розмістіть крихітний вбудований скрипт у head сторінки, який зчитує збережену тему й встановлює клас на кореневому елементі до того, як щось відобразиться.
2. Задайте для кожної теми CSS-властивість color-scheme, щоб елементи, які малює браузер (смуги прокрутки, елементи форм), відповідали темі.
3. Задайте сторінці явний колір фону в обох темах.
4. Якщо застосунок рендериться на сервері, переконайтеся, що сервер і браузер погоджуються щодо початкової теми, інакше сторінка може перерендеритися і мерехтіти.

Приклади промптів

Повне налаштування:

Додай темну тему. Спершу заміни жорстко прописані кольори токенами теми (фон, поверхня, текст, приглушений текст, межа, акцент) зі світлими та темними значеннями. За замовчуванням слідуй системному налаштуванню відвідувача. Додай перемикач теми в шапку з варіантами «Світла», «Темна» і «Системна», запам'ятовуй вибір у localStorage і застосовуй його вбудованим скриптом у head, щоб не було білого спалаху під час завантаження. Задай color-scheme для кожної теми. Залиш поточний світлий дизайн абсолютно без змін.

Виправлення залишків:

Перевір кожну сторінку в темній темі та виправ: текст із низьким контрастом (прагни щонайменше 4,5:1), жорстко прописані білі фони, межі, що зникають, графіки з темним текстом на темному фоні та логотипи, які не видно. Не змінюй світлу тему.

Зображення та графіки:

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

Крок за кроком

1. Проаудитуйте кольори. Знайдіть жорстко прописані кольори та замініть їх токенами. Це більша частина роботи.
2. Визначте темні значення для кожного токена.
3. Слідуйте системі за допомогою prefers-color-scheme (або варіанта dark: у Tailwind за замовчуванням).
4. Додайте перемикач, якщо він потрібен: «Світла», «Темна», «Системна». Зберігайте вибір у браузері; для застосунків із входом його також можна зберігати в профілі користувача.
5. Запобігайте спалаху за допомогою вбудованого скрипта в head і color-scheme.
6. Перевірте складні місця: логотипи, іконки, зображення з білим фоном, графіки, блоки коду, карти, вбудування, листи.
7. Протестуйте обидві теми на комп'ютері та телефоні, із системою у світлому й темному режимах, а також після жорсткого оновлення.

Типові помилки

• Інвертувати все. Фільтр, що інвертує кольори, псує фото та кольори бренду.
• Залишені жорстко прописані кольори. Одна біла картка на темній сторінці одразу впадає в око.
• Сірий текст із низьким контрастом. Виглядає стильно, але погано читається.
• Білий спалах під час завантаження. Особливо помітний на телефонах уночі.
• Забуті сторонні вбудування. Карти, відео та віджети можуть лишитися світлими; перевірте, чи є в них темна опція.
• Перемикач із лише двома станами. Щойно людина його натиснула, вона не може повернутися до слідування системі.
• Зламана світла тема. Прямо скажіть у промпті, що світлий дизайн має лишитися незмінним.

Контрольний список

• Усі кольори походять із токенів теми
• За замовчуванням слідує системному налаштуванню
• Необов'язковий перемикач «Світла», «Темна», «Системна», який запам'ятовується
• Немає білого спалаху під час завантаження чи оновлення
• color-scheme задано, щоб елементи форм і смуги прокрутки відповідали темі
• Контраст тексту щонайменше 4,5:1 в обох темах
• Логотипи, зображення, графіки та вбудування перевірено в темній темі
• Світла тема не змінилася
• Протестовано на комп'ютері та телефоні

Темна тема в Mythex

Застосунки на Mythex за замовчуванням використовують Vite, React, TypeScript і Tailwind, тож наведений вище підхід із Tailwind застосовується напряму: вставте повний промпт налаштування в чат, а потім перевірте попередній перегляд в обох темах і на розмірі телефону. Порада Mythex щодо промптів для дизайну — називати, що змінити і що зберегти, і тут це важливо: скажіть, що світла тема має лишитися такою, як є. Див. Design & UI prompts і, якщо якийсь прохід пішов не так, відкотіться до контрольної точки.

Більше про те, як зробити гарний вигляд, див. як створити гарно виглядаючий застосунок за допомогою ШІ та як писати промпти для конструкторів застосунків на базі ШІ.

Запитання