உங்கள் வலைத்தளம் அல்லது ஆப்பில் டார்க் மோடு சேர்ப்பது எப்படி (வெள்ளை ஒளிர்வு இல்லாமல்)

டார்க் மோடு சேர்க்க, உங்கள் நிறங்களை பெயரிடப்பட்ட tokens (background, text, surface, border, accent) ஆகக் வரையறுங்கள், நேரடியாக எழுதப்பட்ட மதிப்புகளுக்குப் பதிலாக; ஒவ்வொரு token-க்கும் ஒரு light மற்றும் ஒரு dark மதிப்பு கொடுங்கள்; பின்னர் CSS prefers-color-scheme media feature மூலம் மாறுங்கள், அதனால் தளம் பார்வையாளரின் சிஸ்டம் அமைப்பைப் பின்பற்றும். கைமுறை மாற்றியும் வேண்டுமென்றால், தேர்வை browser-இல் சேமித்து, பக்கத்தின் head-இல் ஒரு சிறிய inline script மூலம் பயன்படுத்துங்கள், அப்போது வெள்ளை ஒளிர்வு இருக்காது. பிறகு இரண்டு themes-லும் contrast, படங்கள் மற்றும் வரைபடங்களைச் சரிபாருங்கள். AI app builder-இல் ஒரு தெளிவான prompt பெரும்பாலானவற்றைச் செய்யும்; தரம் வருவது சரிபார்ப்பில்தான்.

இரண்டு அணுகுமுறைகள்

பெரும்பாலான ஆப்கள் இரண்டாவதில் சிறப்பாக இருக்கும்: இயல்பாக சிஸ்டத்தை மதியுங்கள், மக்கள் அதை மேலெழுத அனுமதியுங்கள்.

வண்ண tokens-உடன் தொடங்குங்கள்

நிறங்கள் white, #333 மற்றும் gray-100 என code முழுவதும் சிதறிக் கிடக்கும்போது டார்க் மோடு வேதனையானது. ஒவ்வொரு நிறமும் சிறிய பெயரிடப்பட்ட tokens தொகுப்பிலிருந்து வரும்போது எளிதானது:

ஒவ்வொரு component-உம் token பெயர்களைப் பயன்படுத்துகிறது. அப்போது theme மாற்றுவது என்பது ஒவ்வொரு component-ஐயும் திருத்துவதல்ல, ஒரு தொகுப்பு மதிப்புகளை மாற்றுவதுதான்.

டார்க் தட்டுக்கான குறிப்புகள்:

• பெரிய பகுதிகளுக்கு தூய கருப்பு, தூய வெள்ளையைத் தவிருங்கள்; மிகவும் அடர் சாம்பல் மற்றும் off-white படிக்க எளிதானவை.
• நிழல்களுக்குப் பதிலாக வெளிர் மேற்பரப்புகளால் ஆழத்தைக் காட்டுங்கள் — நிழல்கள் அடர் பின்னணியில் பெரிதாகத் தெரியாது.
• பிரகாசமான பிராண்ட் நிறங்களைச் சற்றுக் குறையுங்கள்; அவை அடர் பின்னணியில் சங்கடமாக ஒளிரக்கூடும்.
• Contrast படிக்கக்கூடியதாக வையுங்கள். WCAG-இன் AA நிலை சாதாரண உரைக்கு குறைந்தது 4.5:1 contrast கேட்கிறது. மங்கலான சாம்பல் உரை டார்க் themes-இல் பெரும்பாலும் இதில் தோற்கும்.

Tailwind CSS-உடன்

Tailwind பல AI-உருவாக்கிய ஆப்களில் இயல்பான styling கருவி. Tailwind-இன் டார்க் மோடு ஆவணங்களின்படி, dark: variant இயல்பாக prefers-color-scheme-ஐப் பயன்படுத்துகிறது, அதனால் bg-white dark:bg-gray-900 போன்ற classes கூடுதல் வேலையின்றி சிஸ்டம் அமைப்பைப் பின்பற்றும்.

Tailwind v4-இல் கைமுறை மாற்றிக்கு, ஆவணங்கள் variant-ஐ ஒரு பெற்றோர் element-இல் ஒரு class ஆக மாற்றுவதைக் காட்டுகின்றன:

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

பிறகு ஆப் root element-இல் dark class-ஐச் சேர்க்கும் அல்லது நீக்கும். பக்கம் வரையப்படும் முன் சேமிக்கப்பட்ட தேர்வை (அல்லது சிஸ்டம் அமைப்பை) பயன்படுத்தும் head-இல் ஒரு inline script-ஐயும் ஆவணங்கள் பரிந்துரைக்கின்றன — ஒளிர்வைத் தவிர்க்க இதுதான் வழி.

வெள்ளை ஒளிர்வைத் தவிர்த்தல்

ஒளிர்வு ஏன் ஏற்படுகிறது: பக்கம் light பயன்முறையில் வரையப்படுகிறது, பிறகு JavaScript ஏற்றப்பட்டு, சேமிக்கப்பட்ட தேர்வைப் படித்து dark-க்கு மாறுகிறது. தீர்வு:

1. Head-இல் ஒரு சிறிய inline script வையுங்கள், அது சேமிக்கப்பட்ட theme-ஐப் படித்து, எதுவும் வரையப்படும் முன் root element-இல் class-ஐ அமைக்கும்.
2. ஒவ்வொரு theme-க்கும் color-scheme CSS பண்பை அமையுங்கள், அதனால் உலாவி வரையும் பகுதிகள் (scrollbars, படிவக் கட்டுப்பாடுகள்) பொருந்தும்.
3. இரண்டு themes-க்கும் ஒரு தெளிவான பின்னணி நிறத்தை பக்கத்துக்குக் கொடுங்கள்.
4. ஆப் server-இல் rendering செய்யப்பட்டால், server மற்றும் browser தொடக்க theme பற்றி ஒத்துப்போக வேண்டும், இல்லையெனில் பக்கம் மீண்டும் வரைந்து ஒளிரும்.

எடுத்துக்காட்டு prompts

ஒரு முழு அமைப்பு:

டார்க் மோடு சேர்க்கவும். முதலில் கடின-குறியிடப்பட்ட நிறங்களை theme tokens-ஆல் மாற்றவும் (background, surface, text, muted text, border, accent), light மற்றும் dark மதிப்புகளுடன். இயல்பாக பார்வையாளரின் சிஸ்டம் அமைப்பைப் பயன்படுத்தவும். Header-இல் Light, Dark, System விருப்பங்கள் கொண்ட theme மாற்றி சேர்க்கவும், தேர்வை localStorage-இல் நினைவில் வைக்கவும், head-இல் ஒரு inline script மூலம் பயன்படுத்தி ஏற்றும்போது வெள்ளை ஒளிர்வு இல்லாமல் வையுங்கள். ஒவ்வொரு theme-க்கும் color-scheme அமையுங்கள். தற்போதைய light வடிவமைப்பை அப்படியே வையுங்கள்.

மீதமுள்ளதைச் சரிசெய்ய:

டார்க் மோடில் ஒவ்வொரு பக்கத்தையும் சரிபார்த்து இவற்றைச் சரிசெய்யவும்: குறைந்த contrast உரை (குறைந்தது 4.5:1 நோக்கு), கடின-குறியிடப்பட்ட வெள்ளைப் பின்னணிகள், மறையும் borders, இருண்ட பின்னணியில் இருண்ட உரை உள்ள வரைபடங்கள், மறையும் logos. Light theme-ஐ மாற்ற வேண்டாம்.

படங்களும் வரைபடங்களும்:

டார்க் மோடில் logo-வின் வெளிர் பதிப்பைப் பயன்படுத்தவும். வரைபட அச்சுகள், கட்டங்கள் மற்றும் லேபிள்கள் theme tokens-ஐப் பயன்படுத்தட்டும். டார்க் மோடில் screenshots பின்னணியில் கலக்காமல் இருக்க மெல்லிய border கொடுக்கவும்.

படிப்படியாக

1. நிறங்களைத் தணிக்கை செய்யுங்கள். கடின-குறியிடப்பட்ட நிறங்களைக் கண்டுபிடித்து tokens-ஆல் மாற்றுங்கள். இதுவே பெரும்பாலான வேலை.
2. ஒவ்வொரு token-க்கும் டார்க் மதிப்புகளை வரையறுங்கள்.
3. prefers-color-scheme (அல்லது Tailwind-இன் இயல்பு dark:) மூலம் சிஸ்டத்தைப் பின்பற்றுங்கள்.
4. மாற்றி வேண்டுமென்றால் சேர்க்கவும்: Light, Dark, System. தேர்வை browser-இல் சேமியுங்கள்; உள்நுழைந்த ஆப்களுக்கு, பயனரின் profile-இலும் சேமிக்கலாம்.
5. ஒளிர்வைத் தடுக்கவும் head inline script மற்றும் color-scheme மூலம்.
6. கடினமான பகுதிகளைச் சரிபாருங்கள்: logos, icons, வெள்ளைப் பின்னணி உள்ள படங்கள், வரைபடங்கள், code blocks, வரைபடங்கள் (maps), embeds, மின்னஞ்சல்கள்.
7. இரண்டு themes-ஐயும் சோதியுங்கள் desktop மற்றும் கைபேசியில், சிஸ்டம் light மற்றும் dark-ஆக இருக்கும்போதும், hard refresh-க்குப் பிறகும்.

பொதுவான தவறுகள்

• எல்லாவற்றையும் தலைகீழாக்குவது. நிறங்களைத் தலைகீழாக்கும் filter புகைப்படங்களையும் பிராண்ட் நிறங்களையும் கெடுக்கும்.
• கடின-குறியிடப்பட்ட நிறங்கள் விடப்பட்டிருப்பது. இருண்ட பக்கத்தில் ஒரே ஒரு வெள்ளை அட்டை உடனே தெரியும்.
• குறைந்த contrast சாம்பல் உரை. பார்ப்பதற்கு நவீனமாக இருக்கும், ஆனால் படிக்கும் தன்மையில் தோற்கும்.
• ஏற்றும்போது வெள்ளை ஒளிர்வு. குறிப்பாக இரவில் கைபேசிகளில் கவனிக்கப்படும்.
• மூன்றாம் தரப்பு embeds-ஐ மறப்பது. வரைபடங்கள், வீடியோக்கள், widgets வெளிரியே இருக்கலாம்; டார்க் விருப்பம் உள்ளதா என்று பாருங்கள்.
• இரண்டு நிலைகள் மட்டுமுள்ள மாற்றி. ஒருவர் அதைக் கிளிக் செய்தால், பின்னர் சிஸ்டத்தைப் பின்பற்றும் நிலைக்குத் திரும்ப முடியாது.
• Light theme-ஐ உடைப்பது. Light வடிவமைப்பு மாறக்கூடாது என்று உங்கள் prompt-இல் தெளிவாகச் சொல்லுங்கள்.

சரிபார்ப்புப் பட்டியல்

• எல்லா நிறங்களும் theme tokens-இலிருந்து வருகின்றன
• இயல்பாக சிஸ்டம் அமைப்பைப் பின்பற்றுகிறது
• Light, Dark, System கொண்ட விருப்ப மாற்றி, நினைவில் வைக்கப்படுகிறது
• ஏற்றும்போதும் refresh-இலும் ஒளிர்வு இல்லை
• Form கட்டுப்பாடுகளும் scrollbars-உம் பொருந்துமாறு color-scheme அமைக்கப்பட்டுள்ளது
• இரண்டு themes-லும் உரை contrast குறைந்தது 4.5:1
• Logos, படங்கள், வரைபடங்கள் மற்றும் embeds டார்க் மோடில் சரிபார்க்கப்பட்டுள்ளன
• Light theme மாறாமல் உள்ளது
• Desktop மற்றும் கைபேசியில் சோதிக்கப்பட்டுள்ளது

Mythex-இல் டார்க் மோடு

Mythex-இல் உருவாக்கப்படும் ஆப்கள் இயல்பாக Vite, React, TypeScript மற்றும் Tailwind பயன்படுத்துகின்றன, அதனால் மேலே உள்ள Tailwind அணுகுமுறை நேரடியாகப் பொருந்தும்: முழு அமைப்பு prompt-ஐ chat-இல் ஒட்டுங்கள், பிறகு Preview-இல் இரண்டு themes-லும் மற்றும் கைபேசி அளவிலும் சரிபாருங்கள். Mythex-இன் வடிவமைப்பு prompting ஆலோசனை, எதை மாற்ற வேண்டும், எதை வைத்திருக்க வேண்டும் என்று பெயரிடுவது — இங்கே light theme அப்படியே இருக்க வேண்டும் என்று சொல்வது முக்கியம். வடிவமைப்பு & UI prompts பாருங்கள், ஒரு முயற்சி தவறினால் checkpoint மூலம் திரும்பிச் செல்லுங்கள்.

சிறந்த தோற்றத்தைப் பெறுவது பற்றி மேலும் அறிய, AI மூலம் நல்ல தோற்றமுள்ள ஆப்பை வடிவமைப்பது எப்படி மற்றும் AI app builders-க்கு prompts எழுதுவது எப்படி பாருங்கள்.

கேள்விகள்