Вэбсайт эсвэл аппдаа dark mode хэрхэн нэмэх (цагаан анивчихгүйгээр)

Dark mode нэмэхийн тулд өнгөө хатуу кодлохын оронд нэрлэгдсэн токен (арын өнгө, текст, гадаргуу, хүрээ, онцлох өнгө) болгон тодорхойлж, токен бүрт light ба dark утга өгч, CSS-ийн prefers-color-scheme медиа шинж чанараар хооронд нь сольж, сайт зочны системийн тохиргоог дагадаг болгоорой. Гар аргаар сольдог товч ч хүсвэл сонголтыг хөтөчид хадгалж, хуудасны head-д жижиг inline скриптээр хэрэглэвэл ачаалах үед цагаан анивчихгүй. Дараа нь хоёр загварт контраст, зураг, диаграммыг шалгаарай. AI апп бүтээгчид нэг тодорхой prompt энэ ихэнхийг хийж чадна; чанар нь шалгалтаас хамаарна.

Хоёр арга

Ихэнх апп хоёр дахь аргаар илүү сайн ажилладаг: анхдагчаар системийг хүндэтгэж, хүмүүст үүнийг давах боломж олго.

Өнгөний токеноос эхэл

Dark mode хүнд болдог нь өнгө white, #333, gray-100 гэж кодонд тараагдсан үед. Харин өнгө бүр цөөн нэрлэгдсэн токенээс гардаг бол хялбар болдог:

Компонент бүр токений нэрийг ашигладаг. Загвар солихдоо компонент бүрийг засахын оронд нэг багц утгыг солино.

Dark палитрын зөвлөмж:

• Том талбайд цэвэр хар, цэвэр цагаанаас зайлсхий; маш бараан саарал, цагаантай ойр өнгө уншихад илүү хялбар.
• Гүнийг сүүдэр биш, гэрэлтэй гадаргуугаар харуул — сүүдэр бараан дэвсгэр дээр бараг харагддаггүй.
• Тод брэндийн өнгийг бага зэрэг ханасан бус болго; тэд бараан дэвсгэр дээр таагүй гэрэлтэж болно.
• Контрастыг уншихад тохиромжтой байлга. WCAG-ийн AA түвшин энгийн текстэд хамгийн багадаа 4.5:1 контраст шаарддаг. Бүдэг саарал текст dark загварт ихэвчлэн энэ шалгуурт унадаг.

Tailwind CSS-тэй

Tailwind нь AI-аар бүтээсэн олон аппын анхдагч загвар хэрэгсэл. Tailwind-ийн dark mode баримт бичиг-т заасанаар dark: variant нь анхдагчаар prefers-color-scheme ашигладаг тул bg-white dark:bg-gray-900 гэх мэт класс нэмэлт ажилгүйгээр системийн тохиргоог дагана.

Tailwind v4-д гар аргаар сольдог товчийн хувьд баримт бичигт variant-ыг эцэг элемент дээрх класс болгон сольдог харуулсан:

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

Дараа нь апп root элемент дээр dark классыг нэмэх эсвэл хасдаг. Баримт бичиг мөн head-ийн inline скриптийг санал болгодог: хадгалсан сонголтыг (эсвэл системийн тохиргоог) хуудас зурагдахаас өмнө хэрэглэнэ — яг энэ нь цагаан анивчихаас зайлсхийх арга.

Цагаан анивчихаас зайлсхийх

Анивчих нь хуудас light горимд зурагдаад, дараа нь JavaScript ачаалж, хадгалсан сонголтыг уншаад dark руу сольдогоос үүсдэг. Засвар:

1. Хуудасны head-д жижиг inline скрипт байрлуул; энэ нь хадгалсан загварыг уншиж, юу ч рендерлэгдэхээс өмнө root элементийн классыг тохируулна.
2. Загвар бүрт color-scheme CSS шинж чанарыг тохируулж, хөтчийн зурдаг хэсгүүд (гүйлгэх зурвас, маягтын хяналт) тохирч байх ёстой.
3. Хуудсанд хоёр загварт тус тусын тодорхой арын өнгө өг.
4. Апп серверт рендерлэгддэг бол сервер болон хөтөч анхны загварын талаар санал нэг байгаа эсэхийг шалга, үгүй бол хуудас дахин рендерлэгдэж анивчиж магадгүй.

Жишээ prompt-ууд

Бүрэн тохиргоо:

Dark mode нэм. Эхлээд хатуу кодлогдсон өнгөнүүдийг загварын токенуудаар (арын өнгө, гадаргуу, текст, бүдэг текст, хүрээ, онцлох өнгө) light ба dark утгатай солих. Зочны системийн тохиргоог анхдагчаар ашигла. Толгойд Light, Dark, System сонголттой загвар солих хэсэг нэм, сонголтыг localStorage-д хадгалж, ачаалах үед цагаан анивчихгүйн тулд head-ийн inline скриптээр хэрэглэ. Загвар бүрт color-scheme тохируул. Одоогийн light дизайныг яг хэвээр нь үлдээ.

Үлдсэн зүйлийг засах:

Бүх хуудсыг dark mode-д шалгаад дараахыг засаарай: контраст бага текст (хамгийн багадаа 4.5:1 зорь), хатуу кодлогдсон цагаан арын өнгө, алга болдог хүрээ, бараан дэвсгэр дээр бараан текст бүхий диаграмм, алга болдог лого. Light загварыг бүү өөрчил.

Зураг, диаграмм:

Dark mode-д логоны цайвар хувилбарыг ашигла. Диаграммын тэнхлэг, сүлжээний шугам, шошгууд загварын токен ашигладаг болго. Dark mode-д дэлгэцийн зургуудад бүдэг хүрээ нэм, ингэснээр арын дэвсгэртэй нийлэхгүй.

Алхам алхмаар

1. Өнгөө аудит хий. Хатуу кодлогдсон өнгийг олж токеноор солих. Ажлын ихэнх нь энэ.
2. Токен бүрт dark утгуудыг тодорхойл.
3. Системийг prefers-color-scheme (эсвэл Tailwind-ийн анхдагч dark:)-аар дага.
4. Хүсвэл товч нэм: Light, Dark, System. Сонголтыг хөтөчид хадгал; нэвтэрдэг аппын хувьд хэрэглэгчийн профайлд ч хадгалж болно.
5. Анивчихаас head-ийн inline скрипт болон color-scheme-ээр сэргийлэх.
6. Хүнд хэсгүүдийг шалга: лого, дүрс, цагаан арын өнгөтэй зураг, диаграмм, код блок, газрын зураг, суулгац, имэйл.
7. Хоёр загварыг ширээний компьютер болон утсан дээр, систем light ба dark байхад, мөн хатуу дахин ачаалсны дараа туршаарай.

Түгээмэл алдаанууд

• Бүгдийг урвуулах. Өнгийг урвуулдаг фильтр нь зураг болон брэндийн өнгийг сүйтгэдэг.
• Хатуу кодлогдсон өнгө үлдэх. Dark хуудсан дээрх нэг цагаан карт шууд мэдэгдэнэ.
• Контраст бага саарал текст. Гоё харагдах ч уншихад муу.
• Ачаалах үед цагаан анивчих. Ялангуяа шөнө утсан дээр тод харагдана.
• Гуравдагч талын суулцсан зүйлийг мартах. Газрын зураг, видео, виджет light хэвээр үлдэж магадгүй; dark сонголттой эсэхийг шалга.
• Хоёр төлөвтэй товч. Хэн нэгэн дарсны дараа системийг дагах руу буцаж чадахгүй.
• Light загварыг эвдэх. Light дизайн хэвээр байх ёстойг prompt-доо тодорхой хэл.

Шалгах жагсаалт

• Бүх өнгө загварын токенуудаас гардаг
• Анхдагчаар системийн тохиргоог дагадаг
• Light, Dark, System сонголттой нэмэлт товч, санагддаг
• Ачаалах эсвэл дахин ачаалахад цагаан анивчихгүй
• Маягтын хяналт, гүйлгэх зурвас тохирохын тулд color-scheme тохирсон
• Хоёр загварт текстийн контраст хамгийн багадаа 4.5:1
• Лого, зураг, диаграмм, суулцсан зүйлс dark mode-д шалгагдсан
• Light загвар өөрчлөгдөөгүй
• Ширээний компьютер болон утсан дээр туршсан

Mythex дээр dark mode

Mythex дээр бүтээсэн аппууд анхдагчаар Vite, React, TypeScript, Tailwind ашигладаг тул дээрх Tailwind арга шууд тохирно: бүрэн тохиргооны prompt-оо чатад буулгаад, дараа нь Preview-г хоёр загварт болон утасны хэмжээнд шалга. Mythex-ийн загварын prompt зөвлөгөө нь юуг өөрчлөх, юуг хэвээр үлдээхээ нэрлэх, энд үүнийг заавал хэл — light загвар яг хэвээр байх ёстой. Дизайн ба UI prompt-ууд-г үзнэ үү, мөн алдаатай болвол checkpoint-оор буцаана уу.

Зүгээр харагдуулах талаар илүү мэдэхийг хүсвэл AI-аар сайхан харагдах апп бүтээх болон AI апп бүтээгчид prompt бичих гарын авлагыг уншина уу.

Асуултууд