ወደ ድረ-ገጽዎ ወይም መተግበሪያዎ ጨለማ ሁነታ (dark mode) እንዴት እንደሚጨምሩ (ብልጭታ ሳይኖር)

ጨለማ ሁነታ ለመጨመር ቀለሞችዎን እንደ የተሰየሙ ቶከኖች (background፣ text፣ surface፣ border፣ accent) ይግለጹ፣ ቀጥታ የተጻፉ እሴቶች ከመጠቀም ይልቅ፣ ለእያንዳንዱ ቶከን የብርሃንና የጨለማ እሴት ይስጡ፣ እና ድረ-ገጹ የጎብኚውን የስርዓት ቅንብር እንዲከተል በ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 ክፍሉን ይጨምራል ወይም ያስወግዳል። ሰነዶቹ ገጹ ከመሳሉ በፊት የተቀመጠውን ምርጫ (ወይም የስርዓቱን ቅንብር) የሚተገበር ትንሽ inline ስክሪፕት በhead ውስጥ እንዲኖር ይጠቁማሉ — ብልጭታውን ለማስቀረት በትክክል የሚያስፈልገው ይህ ነው።

ነጭ ብልጭታን ማስቀረት

ብልጭታው የሚከሰተው ገጹ በብርሃን ሁነታ ሲሳል፣ ከዚያ JavaScript ሲጫን የተቀመጠውን ምርጫ አንብቦ ወደ ጨለማ ሲቀይር ነው። መፍትሄው፦

1. በገጹ head ውስጥ ትንሽ inline ስክሪፕት ያስቀምጡ፣ የተቀመጠውን ገጽታ ያነብብና ክፍሉን በስር አካሉ ላይ ከምንም ነገር በፊት ያዘጋጃል።
2. ለእያንዳንዱ ገጽታ color-scheme የCSS ባህሪን ያዘጋጁ፣ በአሳሹ የሚሳሉት ክፍሎች (scrollbars፣ የቅጽ መቆጣጠሪያዎች) እንዲጣጣሙ።
3. ለገጹ በሁለቱም ገጽታዎች ግልጽ የበስተጀርባ ቀለም ይስጡት።
4. መተግበሪያው በሰርቨር ላይ ከተሰራ፣ ሰርቨሩና አሳሹ በመጀመሪያ ገጽታው እንዲስማሙ ያድርጉ፣ አለበለዚያ ገጹ ዳግም ሊሳል እና ሊብለጨለጭ ይችላል።

ምሳሌ ፕሮምፖች

ሙሉ ማዋቀር፦

ጨለማ ሁነታ ጨምር። መጀመሪያ ጠንካራ የተቀመጡ ቀለሞችን በገጽታ ቶከኖች ተካ (background፣ surface፣ text፣ muted text፣ border፣ accent) ብርሃንና ጨለማ እሴቶች ያሏቸው። በነባሪ የጎብኚውን የስርዓት ቅንብር ተጠቀም። በራስጌው ውስጥ 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. አስቸጋሪ ክፍሎቹን ፈትሹ፦ ሎጎዎች፣ አዶዎች፣ ነጭ ዳራ ያላቸው ምስሎች፣ ቻርቶች፣ የኮድ ብሎኮች፣ ካርታዎች፣ embeds፣ ኢሜይሎች።
7. ሁለቱንም ገጽታዎች ሞክሩ በዴስክቶፕና በስልክ፣ ስርዓቱ በብርሃንና በጨለማ ሲዋቀር፣ እና ከሙሉ ዳግም ጭነት በኋላ።

የተለመዱ ስህተቶች

• ሁሉንም መገልበጥ። ቀለሞችን የሚገለብጥ ማጣሪያ ፎቶዎችንና የምርት ቀለሞችን ያበላሻል።
• ጠንካራ የተጻፉ ቀለሞች ያልተለወጡ። በጨለማ ገጽ ላይ አንድ ነጭ ካርድ ወዲያው ይታያል።
• ዝቅተኛ ንፅፅር ያለው ግራጫ ጽሑፍ። ዘመናዊ ቢመስልም ለንባብ ይወድቃል።
• በመጫን ጊዜ ነጭ ብልጭታ። በተለይ በምሽት ስልኮች ላይ ይታያል።
• የሶስተኛ ወገን embeds መርሳት። ካርታዎች፣ ቪዲዮዎችና ዊጅቶች ብርሃን ሆነው ሊቀሩ ይችላሉ፤ የጨለማ አማራጭ እንዳላቸው ይፈትሹ።
• ሁለት ሁኔታ ብቻ ያለው መቀያየሪያ። አንድ ሰው ካጠፋው በኋላ ወደ ስርዓቱ መከተል መመለስ አይችልም።
• የብርሃን ገጽታውን መስበር። በፕሮምፕቱ ውስጥ የብርሃን ዲዛይኑ እንዳለ እንዲቆይ በግልጽ ይናገሩ።

ዝርዝር

• ሁሉም ቀለሞች ከገጽታ ቶከኖች ይመጣሉ
• በነባሪ የስርዓቱን ቅንብር ይከተላል
• አማራጭ መቀያየሪያ ከLight፣ Dark እና System ጋር፣ ይታወሳል
• በመጫንም ሆነ በማደስ ነጭ ብልጭታ የለም
• color-scheme ተዘጋጅቷል የቅጽ መቆጣጠሪያዎችና scrollbars እንዲስማሙ
• በሁለቱም ገጽታዎች የጽሑፍ ንፅፅር ቢያንስ 4.5:1
• ሎጎዎች፣ ምስሎች፣ ቻርቶችና embeds በጨለማ ሁነታ ተፈትሸዋል
• የብርሃን ገጽታ አልተቀየረም
• በዴስክቶፕና በስልክ ተሞክሯል

በMythex ጨለማ ሁነታ

በMythex ላይ የተገነቡ መተግበሪያዎች በነባሪነት Vite፣ React፣ TypeScript እና Tailwind ይጠቀማሉ፣ ስለዚህ ከላይ ያለው የTailwind አቀራረብ በቀጥታ ይሠራል፦ ሙሉ-ማዋቀር ፕሮምፑን ወደ ቻት ይለጥፉ፣ ከዚያም ቅድመ-እይታን በሁለቱም ገጽታዎች እና በስልክ መጠን ይመልከቱ። የMythex የዲዛይን ፕሮምፕት ምክር ምን እንደሚቀየርና ምን እንደሚቆይ መጥቀስ ነው፤ እዚህ ይህ ወሳኝ ነው — የብርሃን ገጽታው እንዳለ እንዲቆይ ይናገሩ። ለዚህ የዲዛይንና UI ፕሮምፖች ይመልከቱ፤ አንድ ማለፊያ ከተበላሸ በ checkpoint ይመለሱ።

ትክክለኛውን መልክ ስለማግኘት ተጨማሪ ለማወቅ በAI በመጠቀም ጥሩ መልክ ያለው መተግበሪያ እንዴት እንደሚነድፉ እና ለAI መተግበሪያ ገንቢዎች ፕሮምፖችን እንዴት እንደሚጽፉ ይመልከቱ።

ጥያቄዎች