Веб-сайтқа немесе қолданбаға қараңғы режимді қалай қосу керек (ақ жыпылықсыз)

Қараңғы режимді қосу үшін түстеріңізді түстер токендері ретінде атаңыз (фон, мәтін, беттік қабат, шекара, акцент) және қатаң кодталған мәндердің орнына әр токенге ашық және қараңғы мән беріңіз. Содан кейін сайт келушінің жүйе параметрін ұстануы үшін CSS prefers-color-scheme медиа мүмкіндігі арқылы ауыстырыңыз. Қолмен ауыстырғыш та қаласаңыз, таңдауды браузерде сақтап, оны бет басындағы шағын inline скрипт арқылы қолданыңыз, сонда жүктелгенде ақ жыпылықтау болмайды. Содан кейін екі тақырыпта да контрастты, суреттер мен диаграммаларды тексеріңіз. AI қолданба құрастырушысында бір нақты промпт көп жұмысты атқара алады, сапа тексеруде шығады.

Екі тәсіл

Көпшілік қолданбаларға екінші тәсіл ыңғайлы: әдепкіде жүйені ұстаныңыз, бірақ адамдар оны өзгерте алсын.

Түс токендерінен бастаңыз

Түстер кодта white, #333 және gray-100 сияқты шашыраңқы жазылса, қараңғы режим қиын. Барлық түстер аз ғана атаулы токендерден алынса, бәрі оңай:

Әр компонент токен атауларын пайдаланады. Тақырыпты ауыстыру сонда әр компонентті өңдемей, бір жиын мәнді ауыстыру дегенді білдіреді.

Қараңғы палитра бойынша кеңестер:

• Үлкен аймақтарда таза қара мен таза ақты қолданбаңыз; өте қараңғы сұр және ақ-сұр оқуға жеңіл.
• Тереңдікті көлеңкемен емес, ашығырақ беттік қабаттармен көрсетіңіз, қараңғы фонда көлеңке көрінбейді.
• Жарқын брендтік түстерді сәл азайтыңыз, олар қараңғы фонда қатты жарқырап көзге ауыр тиуы мүмкін.
• Контрастты оқылатындай ұстаңыз. WCAG AA деңгейі қалыпты мәтін үшін кем дегенде 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 ішіндегі inline скриптті ұсынады, дәл осы жыпылықтауды болдырмау үшін керек.

Ақ жыпылықтауды болдырмау

Жыпылықтау бет ашық режимде боялып, содан кейін JavaScript жүктеліп, сақталған таңдауды оқып, қараңғыға ауысқанда пайда болады. Түзету:

1. Бет басына шағын inline скрипт қойыңыз: ол сақталған тақырыпты оқып, түбірлік элементке класты мәзір көрсетілмей тұрып орнатады.
2. Әр тақырыпқа color-scheme CSS қасиетін орнатыңыз, сонда браузер салған бөліктер (айналдыру жолағы, форма элементтері) сәйкес болады.
3. Бетке екі тақырыпта да нақты фон түсін беріңіз.
4. Егер қолданба сервер жағында рендерленсе, сервер мен браузер бастапқы тақырыпта келісетінін тексеріңіз, әйтпесе бет қайта рендерленіп жыпылықтауы мүмкін.

Мысал промпттар

Толық баптау:

Қараңғы режимді қос. Алдымен қатты кодталған түстерді тақырып токендеріне (фон, беттік қабат, мәтін, сұр мәтін, шекара, акцент) ауыстыр, әр токеннің ашық және қараңғы мәні болсын. Әдепкі мән ретінде келушінің жүйелік параметрін ұста. Тақырыпқа Ашық, Қараңғы және Жүйе опцияларын беретін ауыстырғышты үстіңгі жолақта қос, таңдауды localStorage-да сақта және жүктелгенде ақ жыпылықтамау үшін оны head ішіндегі inline скриптпен қолдан. Әр тақырып үшін color-scheme орнат. Ағымдағы ашық дизайнды дәл осылай қалдыр.

Қалғанын түзету:

Әр бетті қараңғы режимде тексеріп, мына жерлерді түзет: контрасты төмен мәтін (кем дегенде 4.5:1 мақсат ет), қатты кодталған ақ фондар, жоғалып кететін шекаралар, қараңғы фонда қараңғы мәтіні бар диаграммалар және жоғалып кететін логотиптер. Ашық тақырыпты өзгертпе.

Суреттер мен диаграммалар:

Қараңғы режимде логотиптің ашық нұсқасын қолдан. Диаграмма осьтері, тор сызықтары және белгілері тақырып токендерін пайдалансын. Қараңғы режимде скриншоттарға жұмсақ шекара бер, сонда олар фонмен араласып кетпейді.

Қадамдар

1. Түстерді аудит жасаңыз. Қатты кодталған түстерді табып, токендерге ауыстырыңыз. Жұмыстың негізгі бөлігі осы.
2. Әр токен үшін қараңғы мәндерді анықтаңыз.
3. prefers-color-scheme (немесе Tailwind-тің әдепкі dark:) арқылы жүйені ұстаныңыз.
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 қолданба құрастырушыларына промпттарды қалай жазу керек нұсқауларын оқыңыз.

Сұрақтар