നിങ്ങളുടെ വെബ്സൈറ്റിലോ ആപ്പിലോ ഡാർക്ക് മോഡ് എങ്ങനെ ചേർക്കാം (ഫ്ലാഷ് ഇല്ലാതെ)

ഡാർക്ക് മോഡ് ചേർക്കാൻ, നിങ്ങളുടെ നിറങ്ങളെ നേരിട്ട് എഴുതിയ മൂല്യങ്ങളാക്കുന്നതിനു പകരം പേരുള്ള ടോക്കണുകളായി (background, text, surface, border, accent) നിർവചിക്കുക, ഓരോ ടോക്കണിനും light, dark മൂല്യങ്ങൾ നൽകുക, സന്ദർശകന്റെ സിസ്റ്റം സെറ്റിംഗ് പിന്തുടരാൻ CSS prefers-color-scheme മീഡിയ ഫീച്ചർ ഉപയോഗിച്ച് അവയ്ക്കിടയിൽ മാറുക. മാനുവൽ ടോഗിളും വേണമെങ്കിൽ, തിരഞ്ഞെടുപ്പ് ബ്രൗസറിൽ സൂക്ഷിച്ച്, പേജ് head-ലെ ഒരു ചെറിയ inline സ്ക്രിപ്റ്റ് വഴി പ്രയോഗിക്കുക; അങ്ങനെ ലോഡിൽ വെള്ള ഫ്ലാഷ് ഉണ്ടാകില്ല. പിന്നെ രണ്ട് തീമുകളിലും കോൺട്രാസ്റ്റ്, ചിത്രങ്ങൾ, ചാർട്ടുകൾ എന്നിവ പരിശോധിക്കുക. ഒരു AI ആപ്പ് ബിൽഡറിൽ ഒരു വ്യക്തമായ പ്രോംപ്റ്റ് ഇതിൽ മിക്കതും ചെയ്യും; ഗുണനിലവാരം വരുന്നത് പരിശോധനയിൽ നിന്നാണ്.

രണ്ട് സമീപനങ്ങൾ

മിക്ക ആപ്പുകൾക്കും രണ്ടാമത്തേതാണ് മികച്ചത്: ഡിഫോൾട്ടായി സിസ്റ്റത്തെ മാനിക്കുക, ആളുകൾക്ക് അത് മറികടക്കാൻ അനുവദിക്കുക.

കളർ ടോക്കണുകളിൽ തുടങ്ങുക

white, #333, gray-100 എന്നിങ്ങനെ കോഡിലുടനീളം നിറങ്ങൾ ചിതറിക്കിടക്കുമ്പോൾ ഡാർക്ക് മോഡ് വേദനാജനകമാണ്. എല്ലാ നിറങ്ങളും ചെറിയൊരു കൂട്ടം പേരുള്ള ടോക്കണുകളിൽ നിന്നാകുമ്പോൾ അത് എളുപ്പമാണ്:

ഓരോ കമ്പോണന്റും ടോക്കൺ പേരുകൾ ഉപയോഗിക്കുന്നു. തീമുകൾ മാറ്റുന്നത് ഒരു കൂട്ടം മൂല്യങ്ങൾ മാറ്റുന്നതാണ്, ഓരോ കമ്പോണന്റും തിരുത്തുന്നതല്ല.

ഡാർക്ക് പാലറ്റിനുള്ള ചില ടിപ്പുകൾ:

• വലിയ ഭാഗങ്ങൾക്ക് പൂർണ്ണ കറുപ്പും പൂർണ്ണ വെള്ളയും ഒഴിവാക്കുക; വളരെ ഇരുണ്ട ചാരനിറവും ഓഫ്-വൈറ്റും വായിക്കാൻ എളുപ്പമാണ്.
• നിഴലുകൾ അല്ല, വെളിച്ചമുള്ള പ്രതലങ്ങൾ വഴി ആഴം കാണിക്കുക; ഇരുണ്ട പശ്ചാത്തലത്തിൽ നിഴലുകൾ കഷ്ടിച്ചേ കാണൂ.
• തിളക്കമുള്ള ബ്രാൻഡ് നിറങ്ങൾ അല്പം കുറയ്ക്കുക; ഇരുണ്ട പശ്ചാത്തലത്തിൽ അവ അസ്വസ്ഥമായി തിളങ്ങാം.
• കോൺട്രാസ്റ്റ് വായിക്കാവുന്നതായി നിലനിർത്തുക. സാധാരണ ടെക്സ്റ്റിന് WCAG AA നിലവാരം കുറഞ്ഞത് 4.5:1 കോൺട്രാസ്റ്റ് ആവശ്യപ്പെടുന്നു. മങ്ങിയ ചാരനിറ ടെക്സ്റ്റ് ഡാർക്ക് തീമുകളിൽ പലപ്പോഴും ഇത് പരാജയപ്പെടുത്തുന്നു.

Tailwind CSS-നൊപ്പം

AI-നിർമ്മിത പല ആപ്പുകളിലും Tailwind ആണ് സ്റ്റൈലിംഗ് ടൂൾ. 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. പേജ് head-ൽ ഒരു ചെറിയ inline സ്ക്രിപ്റ്റ് ചേർക്കുക; അത് സേവ് ചെയ്ത തീം വായിച്ച് എന്തെങ്കിലും റെൻഡർ ചെയ്യുന്നതിന് മുമ്പ് റൂട്ട് എലമെന്റിൽ ക്ലാസ് സെറ്റ് ചെയ്യണം.
2. ബ്രൗസർ വരയ്ക്കുന്ന ഭാഗങ്ങൾ (സ്ക്രോൾബാറുകൾ, ഫോം കൺട്രോളുകൾ) യോജിക്കാൻ ഓരോ തീമിനും color-scheme CSS പ്രോപ്പർട്ടി സെറ്റ് ചെയ്യുക.
3. രണ്ട് തീമുകളിലും പേജിന് വ്യക്തമായ background colour നൽകുക.
4. ആപ്പ് സെർവർ-റെൻഡർ ചെയ്യുന്നതാണെങ്കിൽ, സെർവറും ബ്രൗസറും ആദ്യ തീമിൽ യോജിക്കണം; അല്ലെങ്കിൽ പേജ് വീണ്ടും റെൻഡർ ചെയ്ത് മിന്നാം.

ഉദാഹരണ പ്രോംപ്റ്റുകൾ

പൂർണ്ണ സജ്ജീകരണം:

ഡാർക്ക് മോഡ് ചേർക്കുക. ആദ്യം ഹാർഡ്-കോഡ് ചെയ്ത നിറങ്ങൾ തീം ടോക്കണുകൾ കൊണ്ട് (background, surface, text, muted text, border, accent) light, dark മൂല്യങ്ങളോടെ മാറ്റുക. ഡിഫോൾട്ടായി സന്ദർശകന്റെ സിസ്റ്റം സെറ്റിംഗ് ഉപയോഗിക്കുക. ഹെഡറിൽ Light, Dark, System ഓപ്ഷനുകളുള്ള തീം സ്വിച്ച് ചേർക്കുക, തിരഞ്ഞെടുപ്പ് localStorage-ൽ സൂക്ഷിക്കുക, ലോഡിൽ വെള്ള ഫ്ലാഷ് ഇല്ലാതിരിക്കാൻ head-ലെ inline സ്ക്രിപ്റ്റ് വഴി പ്രയോഗിക്കുക. ഓരോ തീമിനും color-scheme സെറ്റ് ചെയ്യുക. നിലവിലെ light ഡിസൈൻ അതേപടി നിലനിർത്തുക.

ബാക്കിയുള്ളത് ശരിയാക്കാൻ:

ഡാർക്ക് മോഡിൽ ഓരോ പേജും പരിശോധിച്ച് ഇവ ശരിയാക്കുക: കുറഞ്ഞ കോൺട്രാസ്റ്റുള്ള ടെക്സ്റ്റ് (കുറഞ്ഞത് 4.5:1 ലക്ഷ്യമിടുക), ഹാർഡ്-കോഡ് ചെയ്ത വെള്ള പശ്ചാത്തലങ്ങൾ, അപ്രത്യക്ഷമാകുന്ന ബോർഡറുകൾ, ഇരുണ്ട പശ്ചാത്തലത്തിൽ ഇരുണ്ട ടെക്സ്റ്റുള്ള ചാർട്ടുകൾ, അപ്രത്യക്ഷമാകുന്ന ലോഗോകൾ. light തീം മാറ്റരുത്.

ചിത്രങ്ങളും ചാർട്ടുകളും:

ഡാർക്ക് മോഡിൽ ലോഗോയുടെ light പതിപ്പ് ഉപയോഗിക്കുക. ചാർട്ട് അക്ഷങ്ങൾ, ഗ്രിഡ്‌ലൈനുകൾ, ലേബലുകൾ എന്നിവ തീം ടോക്കണുകൾ ഉപയോഗിക്കട്ടെ. സ്ക്രീൻഷോട്ടുകൾക്ക് ഡാർക്ക് മോഡിൽ നേരിയ ബോർഡർ നൽകുക, അങ്ങനെ അവ പശ്ചാത്തലത്തിൽ ലയിക്കില്ല.

ഘട്ടം ഘട്ടമായി

1. നിറങ്ങൾ ഓഡിറ്റ് ചെയ്യുക. ഹാർഡ്-കോഡ് ചെയ്ത നിറങ്ങൾ കണ്ടെത്തി ടോക്കണുകൾ കൊണ്ട് മാറ്റുക. ഏറ്റവും കൂടുതൽ ജോലി ഇതാണ്.
2. ഓരോ ടോക്കണിനും ഡാർക്ക് മൂല്യങ്ങൾ നിർവചിക്കുക.
3. prefers-color-scheme (അല്ലെങ്കിൽ Tailwind-ന്റെ ഡിഫോൾട്ട് dark:) വഴി സിസ്റ്റം പിന്തുടരുക.
4. വേണമെങ്കിൽ ഒരു ടോഗിൾ ചേർക്കുക: Light, Dark, System. തിരഞ്ഞെടുപ്പ് ബ്രൗസറിൽ സൂക്ഷിക്കുക; ലോഗിൻ ചെയ്ത ആപ്പുകൾക്ക് ഉപയോക്താവിന്റെ പ്രൊഫൈലിലും സേവ് ചെയ്യാം.
5. ഫ്ലാഷ് തടയുക head-ലെ inline സ്ക്രിപ്റ്റും color-scheme-ഉം വഴി.
6. പ്രയാസമുള്ള ഭാഗങ്ങൾ പരിശോധിക്കുക: ലോഗോകൾ, ഐക്കണുകൾ, വെള്ള പശ്ചാത്തലമുള്ള ചിത്രങ്ങൾ, ചാർട്ടുകൾ, കോഡ് ബ്ലോക്കുകൾ, മാപ്പുകൾ, എംബെഡുകൾ, ഇമെയിലുകൾ.
7. രണ്ട് തീമുകളും പരിശോധിക്കുക ഡെസ്ക്ടോപ്പിലും ഫോണിലും, സിസ്റ്റം light ആയും dark ആയും സെറ്റ് ചെയ്ത്, ഹാർഡ് റിഫ്രഷിന് ശേഷവും.

സാധാരണ തെറ്റുകൾ

• എല്ലാം വിപരീതമാക്കുക. നിറങ്ങൾ വിപരീതമാക്കുന്ന ഫിൽറ്റർ ഫോട്ടോകളും ബ്രാൻഡ് നിറങ്ങളും നശിപ്പിക്കുന്നു.
• ഹാർഡ്-കോഡ് ചെയ്ത നിറങ്ങൾ ബാക്കി വെക്കുക. ഇരുണ്ട പേജിലെ ഒരു വെള്ള കാർഡ് ഉടൻ കണ്ണിൽപ്പെടും.
• കുറഞ്ഞ കോൺട്രാസ്റ്റുള്ള ചാരനിറ ടെക്സ്റ്റ്. കാണാൻ സ്റ്റൈലിഷ് ആണ്, പക്ഷേ വായനയിൽ പരാജയപ്പെടുന്നു.
• ലോഡിൽ വെള്ള ഫ്ലാഷ്. രാത്രിയിൽ ഫോണുകളിൽ പ്രത്യേകിച്ച് ശ്രദ്ധേയം.
• മൂന്നാം കക്ഷി എംബെഡുകൾ മറക്കുക. മാപ്പുകൾ, വീഡിയോകൾ, വിജറ്റുകൾ എന്നിവ light ആയി തന്നെ നിൽക്കാം; ഡാർക്ക് ഓപ്ഷൻ ഉണ്ടോ എന്ന് പരിശോധിക്കുക.
• രണ്ട് അവസ്ഥകൾ മാത്രമുള്ള ടോഗിൾ. ഒരിക്കൽ ക്ലിക്ക് ചെയ്താൽ പിന്നെ സിസ്റ്റം പിന്തുടരാൻ തിരികെ പോകാനാവില്ല.
• light തീം തകർക്കുക. light ഡിസൈൻ മാറ്റമില്ലാതെ നിലനിൽക്കണം എന്ന് പ്രോംപ്റ്റിൽ വ്യക്തമായി പറയുക.

ചെക്ക്‌ലിസ്റ്റ്

• എല്ലാ നിറങ്ങളും തീം ടോക്കണുകളിൽ നിന്ന്
• ഡിഫോൾട്ടായി സിസ്റ്റം സെറ്റിംഗ് പിന്തുടരുന്നു
• Light, Dark, System ഉള്ള ഓപ്ഷണൽ ടോഗിൾ, ഓർമ്മിക്കപ്പെടുന്നത്
• ലോഡിലോ റിഫ്രഷിലോ വെള്ള ഫ്ലാഷ് ഇല്ല
• ഫോം കൺട്രോളുകളും സ്ക്രോൾബാറുകളും യോജിക്കാൻ color-scheme സെറ്റ് ചെയ്തിരിക്കുന്നു
• രണ്ട് തീമുകളിലും ടെക്സ്റ്റ് കോൺട്രാസ്റ്റ് കുറഞ്ഞത് 4.5:1
• ലോഗോകൾ, ചിത്രങ്ങൾ, ചാർട്ടുകൾ, എംബെഡുകൾ ഡാർക്ക് മോഡിൽ പരിശോധിച്ചു
• light തീം മാറ്റമില്ലാതെ
• ഡെസ്ക്ടോപ്പിലും ഫോണിലും പരിശോധിച്ചു

Mythex-ൽ ഡാർക്ക് മോഡ്

Mythex-ൽ നിർമ്മിച്ച ആപ്പുകൾ ഡിഫോൾട്ടായി Vite, React, TypeScript, Tailwind ഉപയോഗിക്കുന്നു; അതുകൊണ്ട് മുകളിലെ Tailwind സമീപനം നേരിട്ട് ബാധകമാണ്: പൂർണ്ണ സജ്ജീകരണ പ്രോംപ്റ്റ് ചാറ്റിൽ ഒട്ടിക്കുക, പിന്നെ Preview-ൽ രണ്ട് തീമുകളിലും ഫോൺ വലുപ്പത്തിലും പരിശോധിക്കുക. മാറ്റിയ കാര്യവും നിലനിർത്തേണ്ട കാര്യവും പേര് ചൊല്ലി പറയുക എന്നതാണ് Mythex-ന്റെ ഡിസൈൻ പ്രോംപ്റ്റിംഗ് ഉപദേശം; ഇവിടെ light തീം മാറ്റരുത് എന്ന് പറയേണ്ടത് പ്രധാനമാണ്. Design & UI പ്രോംപ്റ്റുകൾ കാണുക; ഒരു പാസ് തെറ്റിയാൽ ചെക്ക്‌പോയിന്റ് വഴി തിരികെ പോകുക.

കാഴ്ച ശരിയാക്കുന്നതിനെക്കുറിച്ച് കൂടുതൽ അറിയാൻ, AI ഉപയോഗിച്ച് മനോഹരമായ ആപ്പ് ഡിസൈൻ ചെയ്യുന്നത് എങ്ങനെ, AI ആപ്പ് ബിൽഡറുകൾക്കായി പ്രോംപ്റ്റുകൾ എങ്ങനെ എഴുതാം എന്നിവ വായിക്കുക.

ചോദ്യങ്ങൾ