Ինչպես ավելացնել մութ ռեժիմ ձեր կայքին կամ հավելվածին (առանց սպիտակ փայլի)

Մութ ռեժիմ ավելացնելու համար սահմանեք ձեր գույները որպես անվանված թոքեններ (ֆոն, տեքստ, մակերես, եզր, շեշտադրում) կոշտ գրած արժեքների փոխարեն, տվեք յուրաքանչյուր թոքենի լուսավոր և մութ արժեք, և փոխեք դրանց միջև CSS prefers-color-scheme մեդիա հատկությամբ, որ կայքը հետևի այցելուի համակարգի կարգավորմանը։ Եթե ուզում եք նաև ձեռքով անջատիչ, պահեք ընտրությունը բրաուզերում և կիրառեք այն էջի head-ում տեղադրված փոքր 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 սկրիպտ էջի head-ում, որը կարդում է պահված թեման և դասը սահմանում արմատային տարրի վրա, նախքան որևէ բան նկարվելը։
2. Սահմանեք color-scheme CSS հատկությունը յուրաքանչյուր թեմայի համար, որպեսզի բրաուզերի կողմից նկարված մասերը (scrollbar-ներ, ձևի կառավարիչներ) համապատասխանեն։
3. Տվեք էջին հստակ ֆոնի գույն երկու թեմաներում։
4. Եթե հավելվածը սերվերի կողմից է նկարվում, համոզվեք, որ սերվերը և բրաուզերը համաձայն են սկզբնական թեմայի մասին, հակառակ դեպքում էջը կարող է վերանկարվել և թրթռալ։

Հուշումների օրինակներ

Լրիվ կարգավորում.

Ավելացրու մութ ռեժիմ։ Նախ փոխարինիր կոշտ գրած գույները թեմայի թոքեններով (ֆոն, մակերես, տեքստ, մշուշոտ տեքստ, եզր, շեշտադրում)՝ լուսավոր և մութ արժեքներով։ Լռելյայն հետևիր այցելուի համակարգի կարգավորմանը։ Ավելացրու թեմայի անջատիչ վերնագրում՝ Light, Dark և System ընտրանքներով, պահիր ընտրությունը localStorage-ում և կիրառիր այն head-ի inline սկրիպտով, որպեսզի բեռնվելիս սպիտակ փայլ չլինի։ Սահմանիր color-scheme յուրաքանչյուր թեմայի համար։ Պահիր ընթացիկ լուսավոր դիզայնը ճիշտ այնպես, ինչպես է։

Մնացածը շտկելը.

Ստուգիր յուրաքանչյուր էջ մութ ռեժիմում և շտկիր՝ ցածր կոնտրաստով տեքստը (ձգտիր առնվազն 4.5:1), կոշտ գրած սպիտակ ֆոնները, անհետացող եզրերը, գծապատկերները, որտեղ մուգ տեքստը մութ ֆոնի վրա է, և անհետացող լոգոները։ Մի փոխիր լուսավոր թեման։

Պատկերներ և գծապատկերներ.

Մութ ռեժիմում օգտագործիր լոգոյի լուսավոր տարբերակը։ Գծապատկերի առանցքները, վանդակները և պիտակները թող օգտագործեն թեմայի թոքեններ։ Մութ ռեժիմում էկրանի նկարներին տուր նուրբ եզր, որպեսզի նրանք չխառնվեն ֆոնին։

Քայլ առ քայլ

1. Աուդիտ արեք գույները։ Գտեք կոշտ գրած գույները և փոխարինեք թոքեններով։ Սա աշխատանքի մեծ մասն է։
2. Սահմանեք մութ արժեքները յուրաքանչյուր թոքենի համար։
3. Հետևեք համակարգին prefers-color-scheme-ով (կամ Tailwind-ի լռելյայն dark:-ով)։
4. Ավելացրեք անջատիչ, եթե ուզում եք. Light, Dark, System։ Պահեք ընտրությունը բրաուզերում․ մուտք գործած հավելվածների համար կարող եք այն նաև պահել օգտատիրոջ պրոֆիլում։
5. Կանխեք փայլը head-ի inline սկրիպտով և color-scheme-ով։
6. Ստուգեք դժվար մասերը. լոգոներ, պատկերակներ, սպիտակ ֆոն ունեցող պատկերներ, գծապատկերներ, կոդի բլոկներ, քարտեզներ, ներդրումներ, նամակներ։
7. Փորձարկեք երկու թեմաները աշխատասեղանի և հեռախոսի վրա, համակարգը թե՛ լուսավոր, թե՛ մութ սահմանած, և կոշտ թարմացումից հետո։

Սովորական սխալներ

• Ամեն ինչ շրջել։ Գույները շրջող ֆիլտրը փչացնում է լուսանկարները և բրենդի գույները։
• Մնացած կոշտ գրած գույները։ Մեկ սպիտակ քարտը մութ էջում անմիջապես աչքի է ընկնում։
• Ցածր կոնտրաստով մոխրագույն տեքստ։ Ոճային է թվում, բայց չի բավարարում ընթեռնելիությունը։
• Սպիտակ փայլ բեռնվելիս։ Հատկապես նկատելի է հեռախոսների վրա գիշերը։
• Երրորդ կողմի ներդրումները մոռանալը։ Քարտեզները, տեսանյութերը և վիջեթները կարող են մնալ լուսավոր․ ստուգեք՝ արդյոք ունեն մութ տարբերակ։
• Երկու վիճակ ունեցող անջատիչ։ Երբ մարդը սեղմում է այն, չի կարող հետ վերադառնալ համակարգին հետևելուն։
• Լուսավոր թեմայի փչացում։ Հուշման մեջ հստակ ասեք, որ լուսավոր դիզայնը պետք է մնա նույնը։

Ստուգաթերթ

• Բոլոր գույները գալիս են թեմայի թոքեններից
• Լռելյայն հետևում է համակարգի կարգավորմանը
• Կամընտիր անջատիչ՝ Light, Dark և System, պահված
• Բեռնման կամ թարմացման ժամանակ սպիտակ փայլ չկա
• color-scheme-ը սահմանված է, որպեսզի ձևի կառավարիչները և scrollbar-ները համապատասխանեն
• Տեքստի կոնտրաստը առնվազն 4.5:1 է երկու թեմաներում
• Լոգոները, պատկերները, գծապատկերները և ներդրումները ստուգված են մութ ռեժիմում
• Լուսավոր թեման անփոփոխ է
• Փորձարկված է աշխատասեղանին և հեռախոսին

Մութ ռեժիմը Mythex-ում

Mythex-ով կառուցված հավելվածները լռելյայն օգտագործում են Vite, React, TypeScript և Tailwind, ուստի վերևի Tailwind մոտեցումը ուղղակիորեն կիրառելի է․ տեղադրեք լրիվ կարգավորման հուշումը չաթում, ապա ստուգեք Preview-ը երկու թեմաներում և հեռախոսի չափով։ Mythex-ի դիզայնի հուշումների խորհուրդն է նշել, թե ինչ փոխել և ինչ պահել, ինչը այստեղ կարևոր է․ ասեք, որ լուսավոր թեման պետք է մնա այնպես, ինչպես կա։ Տես Դիզայն և UI հուշումներ, և եթե որևէ անցում սխալ ստացվի, վերադարձեք checkpoint-ով։

Ավելի շատ բան այն մասին, թե ինչպես ստանալ ճիշտ տեսքը, տես ինչպես դիզայնավորել գեղեցիկ հավելված AI-ով և ինչպես գրել հուշումներ AI հավելվածի կառուցիչների համար։

Հարցեր