როგორ დავამატოთ მუქი რეჟიმი ვებსაიტში ან აპში (ციმციმის გარეშე)

მუქი რეჟიმის დასამატებლად განსაზღვრეთ თქვენი ფერები როგორც სახელდებული ტოკენები (ფონი, ტექსტი, ზედაპირი, ჩარჩო, აქცენტი) და არა ხისტად ჩაწერილი მნიშვნელობები, თითოეულ ტოკენს მიანიჭეთ ღია და მუქი მნიშვნელობა და გადართეთ მათ შორის CSS-ის prefers-color-scheme მედია ფუნქციით, რათა საიტი მიჰყვეს ვიზიტორის სისტემურ პარამეტრს. თუ გსურთ ხელით გადამრთველიც, შეინახეთ არჩევანი ბრაუზერში და გამოიყენეთ პატარა inline სკრიპტით გვერდის head-ში, რომ ჩატვირთვისას თეთრი ციმციმი არ იყოს. შემდეგ შეამოწმეთ კონტრასტი, სურათები და დიაგრამები ორივე თემაში. AI აპის შემქმნელში ერთი მკაფიო prompt ამის უმეტესობას აკეთებს; ხარისხი შემოწმებაშია.

ორი მიდგომა

უმეტეს აპს ყველაზე კარგად მეორე მიდგომა ემსახურება: ნაგულისხმევად პატივი სცეთ სისტემას, ხალხს კი საშუალება მისცით, გადაფაროს ის.

დაიწყეთ ფერის ტოკენებით

მუქი რეჟიმი მტკივნეულია, როცა ფერები კოდში გაბნეულია როგორც 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 კლასს root ელემენტზე. დოკუმენტაცია ასევე გვირჩევს head-ში inline სკრიპტს, რომელიც შენახულ არჩევანს (ან სისტემურ პარამეტრს) გვერდის დახატვამდე იყენებს — სწორედ ეს არის ციმციმის თავიდან აცილების გზა.

თეთრი ციმციმის თავიდან აცილება

ციმციმი ხდება იმიტომ, რომ გვერდი ღია რეჟიმში იხატება, შემდეგ იტვირთება JavaScript, კითხულობს შენახულ არჩევანს და ირთავს მუქ რეჟიმს. გამოსწორება:

1. ჩასვით პატარა inline სკრიპტი გვერდის head-ში, რომელიც კითხულობს შენახულ თემას და root ელემენტზე კლასს აყენებს ყველაფრის დახატვამდე.
2. დააყენეთ color-scheme CSS თვისება თითოეული თემისთვის, რომ ბრაუზერის მიერ დახატული ნაწილები (სქროლბარები, ფორმის ელემენტები) შეესაბამებოდეს.
3. მიანიჭეთ გვერდს ცხადი ფონის ფერი ორივე თემაში.
4. თუ აპი სერვერზე რენდერდება, დარწმუნდით, რომ სერვერი და ბრაუზერი ერთსა და იმავე საწყის თემას იყენებენ; წინააღმდეგ შემთხვევაში გვერდმა შეიძლება თავიდან გადაიხატოს და დაციმციმოს.

მაგალითი მოთხოვნები

სრული დაყენება:

დაამატე მუქი რეჟიმი. ჯერ შეცვალე ხისტად ჩაწერილი ფერები თემის ტოკენებით (ფონი, ზედაპირი, ტექსტი, მოშავო ტექსტი, ჩარჩო, აქცენტი) ღია და მუქი მნიშვნელობებით. ნაგულისხმევად მიჰყევი ვიზიტორის სისტემურ პარამეტრს. დაამატე თემის გადამრთველი ჰედერში Light, Dark და System ოფციებით, შეინახე არჩევანი localStorage-ში და გამოიყენე inline სკრიპტი head-ში, რომ ჩატვირთვისას თეთრი ციმციმი არ იყოს. დააყენე color-scheme თითოეული თემისთვის. ღია თემის არსებული დიზაინი ზუსტად შეინარჩუნე.

დარჩენილის გასწორება:

შეამოწმე ყველა გვერდი მუქ რეჟიმში და გაასწორე: დაბალკონტრასტიანი ტექსტი (მიზანი მინიმუმ 4.5:1), ხისტად ჩაწერილი თეთრი ფონები, ჩარჩოები, რომლებიც ქრება, დიაგრამები მუქი ტექსტით მუქ ფონზე და ლოგოები, რომლებიც ქრება. ღია თემა არ შეცვალო.

სურათები და დიაგრამები:

მუქ რეჟიმში ლოგოს გამოიყენე ღია ვერსია. დიაგრამის ღერძები, ბადეები და ეტიკეტები თემის ტოკენებს იყენებდნენ. მუქ რეჟიმში ეკრანის ანაბეჭდებს დაამატე ნაზი ჩარჩო, რომ ფონში არ აითქვიფონ.

ნაბიჯ-ნაბიჯ

1. აუდიტი ფერებზე. იპოვეთ ხისტად ჩაწერილი ფერები და შეცვალეთ ტოკენებით. ეს სამუშაოს უმეტესობაა.
2. განსაზღვრეთ მუქი მნიშვნელობები თითოეული ტოკენისთვის.
3. მიჰყევით სისტემას prefers-color-scheme-ით (ან Tailwind-ის ნაგულისხმევი dark:-ით).
4. დაამატეთ გადამრთველი, თუ გინდათ: Light, Dark, System. შეინახეთ არჩევანი ბრაუზერში; შესულ აპებში შეგიძლიათ მომხმარებლის პროფილშიც შეინახოთ.
5. აარიდეთ ციმციმი head-ის inline სკრიპტით და color-scheme-ით.
6. შეამოწმეთ რთული ნაწილები: ლოგოები, ხატულები, თეთრი ფონის მქონე სურათები, დიაგრამები, კოდის ბლოკები, რუკები, ჩაშენებები, ელფოსტები.
7. ტესტირება ორივე თემაში დესკტოპსა და ტელეფონზე, სისტემით ღია და მუქი რეჟიმით, და სრული გადატვირთვის შემდეგ.

ხშირი შეცდომები

• ყველაფრის ინვერსია. ფილტრი, რომელიც ფერებს აინვერტირებს, ფოტოებსა და ბრენდის ფერებს ანადგურებს.
• დარჩენილი ხისტად ჩაწერილი ფერები. ერთი თეთრი ბარათი მუქ გვერდზე მაშინვე გამოჩნდება.
• დაბალკონტრასტიანი ნაცრისფერი ტექსტი. სტილიზებულად გამოიყურება, მაგრამ კითხვადობას არ აკმაყოფილებს.
• თეთრი ციმციმი ჩატვირთვისას. განსაკუთრებით შესამჩნევია ღამით ტელეფონზე.
• მესამე მხარის ჩაშენებების დავიწყება. რუკები, ვიდეოები და ვიჯეტები ღია დარჩეს; შეამოწმეთ, აქვთ თუ არა მუქი ვარიანტი.
• ორმდგომარეობიანი გადამრთველი. როგორც კი ვიღაცა დააჭერს, ვერ დაუბრუნდება სისტემის მიყოლას.
• ღია თემის გატეხვა. მკაფიოდ დაწერეთ prompt-ში, რომ ღია დიზაინი უცვლელი უნდა დარჩეს.

ჩამონათვალი

• ყველა ფერი თემის ტოკენებიდან მოდის
• ნაგულისხმევად მიჰყვება სისტემურ პარამეტრს
• არჩევითი გადამრთველი Light, Dark და System ოფციებით, დამახსოვრებული
• ჩატვირთვისას ან გადატვირთვისას თეთრი ციმციმი არ არის
• color-scheme დაყენებულია, რომ ფორმის ელემენტები და სქროლბარები შეესაბამებოდეს
• ტექსტის კონტრასტი მინიმუმ 4.5:1 ორივე თემაში
• ლოგოები, სურათები, დიაგრამები და ჩაშენებები შემოწმებულია მუქ რეჟიმში
• ღია თემა უცვლელია
• შემოწმებულია დესკტოპსა და ტელეფონზე

მუქი რეჟიმი Mythex-ზე

Mythex-ზე აგებული აპები ნაგულისხმევად იყენებს Vite-ს, React-ს, TypeScript-ს და Tailwind-ს, ასე რომ ზემოთ აღწერილი Tailwind მიდგომა პირდაპირ გამოდგება: ჩასვით სრული დაყენების prompt ჩატში, შემდეგ შეამოწმეთ გადახედვა ორივე თემაში და ტელეფონის ზომით. Mythex-ის დიზაინის prompt-ების რჩევა არის ის, რომ უნდა დაასახელოთ რა შეიცვალოს და რა შენარჩუნდეს — აქ ეს მნიშვნელოვანია: თქვით, რომ ღია თემა უცვლელი უნდა დარჩეს. იხილეთ დიზაინისა და UI prompt-ები და თუ რომელიმე გავლა არასწორად წავიდა, დაბრუნდით checkpoint-ზე.

დიზაინის სწორად მიღების შესახებ მეტისთვის იხილეთ როგორ ავაშენოთ კარგად გამოიყურებადი აპი AI-ით და როგორ დავწეროთ prompt-ები AI აპის შემქმნელებისთვის.

კითხვები