Как да добавите тъмен режим към сайт или приложение (без бял проблясък)

За да добавите тъмен режим, дефинирайте цветовете си като именувани токени (фон, текст, повърхност, рамка, акцент) вместо фиксирани стойности и дайте на всеки токен светла и тъмна стойност. Превключвайте между тях с CSS медийната функция prefers-color-scheme, така че сайтът да следва системната настройка на посетителя. Ако искате и ръчен превключвател, запазвайте избора в браузъра и го прилагайте с малък вграден скрипт в head секцията, за да няма бял проблясък при зареждане. След това проверете контраста, изображенията и графиките и в двете теми. В AI платформа за създаване на приложения една ясна заявка може да свърши по-голямата част от работата; качеството идва от проверката.

Два подхода

Повечето приложения работят най-добре с втория вариант: зачитат системната настройка по подразбиране и оставят хората да я променят.

Започнете с цветови токени

Тъмният режим е трудна работа, когато цветовете са разпръснати из кода като white, #333 и gray-100. Става лесно, когато всеки цвят идва от малък набор именувани токени:

Всеки компонент използва имената на токените. Превключването на тема тогава означава смяна на един набор стойности, а не редакция на всеки компонент.

Съвети за тъмната палитра:

• Избягвайте чисто черно и чисто бяло за големи области; много тъмно сиво и почти бяло са по-лесни за четене.
• Показвайте дълбочина със светли повърхности, не със сенки — сенките почти не се виждат на тъмен фон.
• Леко намалете наситеността на ярките цветове на марката; на тъмен фон могат да светят неприятно.
• Поддържайте четимия контраст. Нивото AA на WCAG изисква поне 4,5:1 контраст за обикновен текст. Приглушеният сив текст често не го постига в тъмни теми.

С Tailwind CSS

Tailwind е основният инструмент за стилизиране в много приложения, създадени с AI. Според документацията на 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 по-горе важи директно: поставете пълния промпт за настройка в чата, после проверете Preview в двете теми и на размер за телефон. Съветът на Mythex за дизайн е да се посочва какво да се промени и какво да се запази, което тук е важно — кажете, че светлата тема трябва да остане такава, каквато е. Вижте промптове за дизайн и UI и върнете към checkpoint, ако някой проход се обърка.

За повече за това как да постигнете правилния вид вижте как да направите добре изглеждащо приложение с AI и как да пишете промптове за AI платформи за създаване на приложения.

Въпроси