Како да додадете темен режим на вашата веб-страница или апликација (без бел блесок)

За да додадете темен режим, дефинирајте ги вашите бои како именувани токени (позадина, текст, површина, граница, акцент) наместо фиксни вредности, дајте на секој токен светла и темна вредност и префрлувајте помеѓу нив со 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 алатки за изградба на апликации.

Прашања