Jinsi ya Kuongeza Hali ya Giza kwenye Tovuti au Programu Yako (Bila Mweko Mweupe)

Ili kuongeza hali ya giza, bainisha rangi zako kama tokeni zenye majina (usuli, maandishi, uso, mpaka, rangi kuu) badala ya thamani zilizoandikwa moja kwa moja, mpe kila tokeni thamani ya mwanga na ya giza, kisha ubadilishe kati yake kwa kutumia kipengele cha CSS prefers-color-scheme ili tovuti ifuate mpangilio wa mfumo wa mgeni. Ukitaka pia kitufe cha kubadilisha kwa mkono, hifadhi chaguo kwenye kivinjari na ulitumie kwa hati ndogo ya ndani kwenye kichwa cha ukurasa ili kusiwe na mweko mweupe wakati wa kufunguliwa. Kisha angalia utofautishaji, picha na chati katika mandhari zote mbili. Katika zana ya kujenga programu za AI, ombi moja wazi linaweza kufanya sehemu kubwa ya kazi hii; ubora unatokana na ukaguzi.

Njia mbili

Miradi mingi hufanya vizuri zaidi kwa njia ya pili: heshimu mfumo kama chaguo-msingi, lakini mruhusu mtu abadilishe.

Anza na tokeni za rangi

Hali ya giza ni ngumu pale rangi zinapotawanyika kwenye msimbo kama white, #333 na gray-100. Inakuwa rahisi pale rangi zote zinapotoka kwenye seti ndogo ya tokeni zenye majina:

Kila kipengele kinatumia majina ya tokeni. Kubadilisha mandhari kunamaanisha kubadilisha seti moja ya thamani, si kuhariri kila kipengele.

Vidokezo kwa rangi za giza:

• Epuka nyeusi kabisa na nyeupe kabisa kwa sehemu kubwa; kijivu giza sana na nyeupe iliyofifia ni rahisi zaidi kusoma.
• Onyesha kina kwa nyuso zenye mwanga zaidi, si kwa vivuli: vivuli karibu havionekani kwenye usuli wa giza.
• Punguza ukali wa rangi kuu angavu kidogo; zinaweza kung'aa kwa njia isiyopendeza kwenye usuli wa giza.
• Weka utofautishaji unaoweza kusomeka. Kiwango cha WCAG AA kinataka angalau 4.5:1 kwa maandishi ya kawaida. Maandishi ya kijivu yaliyofifia mara nyingi hayafikii kiwango hiki katika mandhari za giza.

Kwa Tailwind CSS

Tailwind ndiyo zana chaguo-msingi ya kupamba katika programu nyingi zilizojengwa kwa AI. Kulingana na nyaraka za hali ya giza za Tailwind, kigeuzi cha dark: hutumia prefers-color-scheme kwa chaguo-msingi, hivyo madarasa kama bg-white dark:bg-gray-900 hufuata mpangilio wa mfumo bila kazi ya ziada.

Kwa kitufe cha kubadilisha kwa mkono katika Tailwind v4, nyaraka zinaonyesha kubadilisha kigeuzi kiwe darasa kwenye kipengele cha mzazi:

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

Kisha programu inaongeza au kuondoa darasa dark kwenye kipengele cha mizizi. Nyaraka pia zinapendekeza hati ya ndani kwenye kichwa inayotumia chaguo lililohifadhiwa (au mpangilio wa mfumo) kabla ukurasa haujachorwa, ambayo ndiyo hasa njia ya kuepuka mweko.

Kuepuka mweko mweupe

Mweko hutokea kwa sababu ukurasa unachorwa kwa mwanga, kisha JavaScript inapakia, inasoma chaguo lililohifadhiwa, na kubadilisha kuwa giza. Suluhisho ni:

1. Weka hati ndogo ya ndani kwenye kichwa cha ukurasa inayosoma mandhari iliyohifadhiwa na kuweka darasa kwenye kipengele cha mizizi kabla ya chochote kuonyeshwa.
2. Weka mali ya CSS ya color-scheme kwa kila mandhari ili sehemu zinazochorwa na kivinjari (vipau vya kusogeza, vidhibiti vya fomu) zilingane.
3. Weka rangi ya usuli iliyo wazi kwa ukurasa katika mandhari zote mbili.
4. Ikiwa programu inachorwa upande wa seva, hakikisha seva na kivinjari vinakubaliana mandhari ya awali, vinginevyo ukurasa unaweza kuchorwa upya na kumeta.

Mifano ya maombi

Mpangilio kamili:

Ongeza hali ya giza. Kwanza badilisha rangi zilizoandikwa moja kwa moja kuwa tokeni za mandhari (usuli, uso, maandishi, maandishi ya pembeni, mpaka, rangi kuu) zenye thamani za mwanga na giza. Weka chaguo-msingi kuwa mpangilio wa mfumo wa mgeni. Ongeza swichi ya mandhari kwenye kichwa chenye chaguo za Mwanga, Giza na Mfumo, kumbuka chaguo kwenye localStorage, na ulitumie kwa hati ya ndani kwenye kichwa ili kusiwe na mweko mweupe wakati wa kufunguliwa. Weka color-scheme kwa kila mandhari. Weka muundo wa sasa wa mwanga jinsi ulivyo.

Kurekebisha kilichobaki:

Kagua kila ukurasa katika hali ya giza na urekebishe: maandishi yenye utofautishaji hafifu (lenga angalau 4.5:1), usuli mweupe uliowekwa moja kwa moja, mipaka inayopotea, chati zenye maandishi meusi kwenye usuli mweusi, na nembo zinazopotea. Usibadilishe mandhari ya mwanga.

Picha na chati:

Tumia toleo jepesi la nembo katika hali ya giza. Fanya mistari ya shoka, gridi na lebo za chati zitumie tokeni za mandhari. Weka mpaka mwepesi kwenye picha za skrini katika hali ya giza ili zisichanganyike na usuli.

Hatua kwa hatua

1. Kagua rangi. Tafuta rangi zilizoandikwa moja kwa moja na uzibadilishe kuwa tokeni. Hii ndiyo kazi kubwa zaidi.
2. Bainisha thamani za giza kwa kila tokeni.
3. Fuata mfumo kwa prefers-color-scheme (au dark: ya chaguo-msingi ya Tailwind).
4. Ongeza kitufe ukitaka: Mwanga, Giza, Mfumo. Hifadhi chaguo kwenye kivinjari; kwa programu zenye kuingia, unaweza pia kulihifadhi kwenye wasifu wa mtumiaji.
5. Zuia mweko kwa hati ya ndani kwenye kichwa na color-scheme.
6. Angalia sehemu ngumu: nembo, aikoni, picha zenye usuli mweupe, chati, vizuizi vya msimbo, ramani, vipachiko na barua pepe.
7. Jaribu mandhari zote mbili kwenye kompyuta na simu, kwa mfumo ukiwa mwanga na giza, na baada ya kuonyesha upya ukurasa kwa nguvu.

Makosa ya kawaida

• Kugeuza kila kitu. Kichujio kinachogeuza rangi kinaharibu picha na rangi za chapa.
• Rangi zilizoandikwa moja kwa moja zilizobaki. Kadi moja nyeupe kwenye ukurasa wa giza inaonekana mara moja.
• Maandishi ya kijivu yenye utofautishaji hafifu. Yanaonekana maridadi, lakini hayasomeki vizuri.
• Mweko mweupe wakati wa kufunguliwa. Unaonekana zaidi kwenye simu usiku.
• Kusahau vipachiko vya wahusika wengine. Ramani, video na wijeti vinaweza kubaki vyeupe; angalia kama vina chaguo la giza.
• Kitufe chenye hali mbili tu. Mtu akishakibonyeza, hawezi kurudi kufuata mfumo.
• Kuharibu mandhari ya mwanga. Sema waziwazi kwenye ombi lako kwamba muundo wa mwanga ubaki vile vile.

Orodha ya ukaguzi

• Rangi zote zinatoka kwenye tokeni za mandhari
• Inafuata mpangilio wa mfumo kwa chaguo-msingi
• Kitufe cha hiari chenye Mwanga, Giza na Mfumo, kinachokumbukwa
• Hakuna mweko mweupe wakati wa kufunguliwa au kuonyesha upya
• color-scheme imewekwa ili fomu na vipau vya kusogeza vilingane
• Utofautishaji wa maandishi angalau 4.5:1 katika mandhari zote mbili
• Nembo, picha, chati na vipachiko vimekaguliwa katika hali ya giza
• Mandhari ya mwanga haijabadilika
• Imejaribiwa kwenye kompyuta na simu

Hali ya giza na Mythex

Programu zilizojengwa kwenye Mythex hutumia Vite, React, TypeScript na Tailwind kwa chaguo-msingi, hivyo njia ya Tailwind hapo juu inatumika moja kwa moja: bandika ombi kamili kwenye mazungumzo, kisha angalia Preview katika mandhari zote mbili na kwa ukubwa wa simu. Ushauri wa Mythex wa kuomba muundo ni kutaja kitakachobadilishwa na kitakachobaki, jambo muhimu hapa; sema kwamba mandhari ya mwanga lazima ibaki vile ilivyo. Tazama Design & UI prompts, na rudisha nyuma kwa checkpoint ukiona marekebisho yamekwenda vibaya.

Kwa maelezo zaidi kuhusu kupata muonekano sahihi, tazama jinsi ya kubuni programu nzuri kwa AI na jinsi ya kuandika maombi kwa zana za kujenga programu za AI.

Maswali