మీ వెబ్‌సైట్ లేదా యాప్‌కి డార్క్ మోడ్ ఎలా జోడించాలి (ఫ్లాష్ లేకుండా)

డార్క్ మోడ్ జోడించడానికి, మీ రంగులను హార్డ్-కోడ్ చేసిన విలువలకు బదులుగా పేరున్న టోకెన్లు (background, text, surface, border, accent) గా నిర్వచించండి, ప్రతి టోకెన్‌కి లైట్ మరియు డార్క్ విలువ ఇవ్వండి, మరియు CSS prefers-color-scheme మీడియా ఫీచర్‌తో వాటి మధ్య మారండి, తద్వారా సైట్ సందర్శకుడి సిస్టమ్ సెట్టింగ్‌ని అనుసరిస్తుంది. మాన్యువల్ టోగుల్ కూడా కావాలంటే, ఎంపికను బ్రౌజర్‌లో నిల్వ చేసి, పేజీ హెడ్‌లో ఒక చిన్న ఇన్‌లైన్ స్క్రిప్ట్‌తో అప్లై చేయండి, అప్పుడు లోడ్‌పై తెల్ల ఫ్లాష్ ఉండదు. తర్వాత రెండు థీమ్‌లలో కాంట్రాస్ట్, చిత్రాలు మరియు చార్ట్‌లు తనిఖీ చేయండి. 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 క్లాస్ జోడిస్తుంది లేదా తీసివేస్తుంది. డాక్స్ హెడ్‌లో ఒక ఇన్‌లైన్ స్క్రిప్ట్‌ని కూడా సూచిస్తాయి, అది పేజీ పెయింట్ కావడానికి ముందు సేవ్ చేసిన ఎంపిక (లేదా సిస్టమ్ సెట్టింగ్) ని అప్లై చేస్తుంది — ఫ్లాష్‌ను ఎలా నివారించాలో సరిగ్గా ఇదే.

తెల్ల ఫ్లాష్‌ను నివారించడం

పేజీ లైట్ మోడ్‌లో పెయింట్ అవుతుంది, తర్వాత JavaScript లోడ్ అయ్యి, సేవ్ చేసిన ఎంపికను చదివి డార్క్‌కి మారుతుంది కాబట్టి ఫ్లాష్ జరుగుతుంది. పరిష్కారం:

1. ఏదైనా రెండర్ కావడానికి ముందే సేవ్ చేసిన థీమ్‌ని చదివి రూట్ ఎలిమెంట్‌పై క్లాస్ సెట్ చేసే చిన్న ఇన్‌లైన్ స్క్రిప్ట్‌ను పేజీ హెడ్‌లో ఉంచండి.
2. ప్రతి థీమ్‌కి color-scheme CSS ప్రాపర్టీ సెట్ చేయండి, తద్వారా బ్రౌజర్ గీసే భాగాలు (స్క్రోల్‌బార్లు, ఫారమ్ కంట్రోల్స్) సరిపోలతాయి.
3. రెండు థీమ్‌లకు పేజీకి స్పష్టమైన బ్యాక్‌గ్రౌండ్ రంగు ఇవ్వండి.
4. యాప్ సర్వర్-రెండర్ చేయబడితే, సర్వర్ మరియు బ్రౌజర్ ప్రారంభ థీమ్‌పై అంగీకరిస్తున్నాయో నిర్ధారించుకోండి, లేకపోతే పేజీ మళ్లీ రెండర్ అయి మినుకుమినుకుమంటుంది.

ఉదాహరణ ప్రాంప్ట్‌లు

పూర్తి సెటప్:

డార్క్ మోడ్ జోడించు. ముందుగా హార్డ్-కోడ్ చేసిన రంగులను థీమ్ టోకెన్లతో (background, surface, text, muted text, border, accent) లైట్ మరియు డార్క్ విలువలతో మార్చు. డిఫాల్ట్‌గా సందర్శకుడి సిస్టమ్ సెట్టింగ్ వాడు. హెడర్‌లో Light, Dark మరియు System ఎంపికలతో థీమ్ స్విచ్ జోడించు, ఎంపికను localStorage లో గుర్తుంచుకో, మరియు లోడ్‌పై తెల్ల ఫ్లాష్ లేకుండా హెడ్‌లోని ఇన్‌లైన్ స్క్రిప్ట్‌తో అప్లై చేయి. ప్రతి థీమ్‌కి color-scheme సెట్ చేయి. ప్రస్తుత లైట్ డిజైన్‌ను సరిగ్గా ఉంచు.

మిగిలినవి సరిచేయడం:

డార్క్ మోడ్‌లో ప్రతి పేజీని తనిఖీ చేసి వీటిని సరిచేయి: తక్కువ కాంట్రాస్ట్ టెక్స్ట్ (కనీసం 4.5:1 లక్ష్యం), హార్డ్-కోడ్ చేసిన తెలుపు బ్యాక్‌గ్రౌండ్‌లు, కనుమరుగవుతున్న బార్డర్లు, డార్క్ బ్యాక్‌గ్రౌండ్‌లపై డార్క్ టెక్స్ట్ ఉన్న చార్ట్‌లు, మరియు కనిపించని లోగోలు. లైట్ థీమ్‌ని మార్చవద్దు.

చిత్రాలు మరియు చార్ట్‌లు:

డార్క్ మోడ్‌లో లోగో యొక్క తేలికైన వెర్షన్ వాడు. చార్ట్ యాక్సిస్‌లు, గ్రిడ్‌లైన్లు మరియు లేబుల్‌లు థీమ్ టోకెన్లు వాడేలా చేయి. స్క్రీన్‌షాట్‌లు బ్యాక్‌గ్రౌండ్‌లో కలిసిపోకుండా డార్క్ మోడ్‌లో సూక్ష్మమైన బార్డర్ ఇవ్వు.

దశల వారీగా

1. రంగులను ఆడిట్ చేయండి. హార్డ్-కోడ్ చేసిన రంగులు కనుగొని టోకెన్లతో మార్చండి. ఇదే చాలా పని.
2. ప్రతి టోకెన్‌కి డార్క్ విలువలు నిర్వచించండి.
3. prefers-color-scheme (లేదా Tailwind యొక్క డిఫాల్ట్ dark:) తో సిస్టమ్‌ని అనుసరించండి.
4. టోగుల్ జోడించండి కావాలంటే: Light, Dark, System. ఎంపికను బ్రౌజర్‌లో నిల్వ చేయండి; లాగిన్ అయిన యాప్‌ల కోసం యూజర్ ప్రొఫైల్‌లో కూడా సేవ్ చేయవచ్చు.
5. ఫ్లాష్‌ను నివారించండి హెడ్ ఇన్‌లైన్ స్క్రిప్ట్ మరియు color-scheme తో.
6. కష్టమైన భాగాలు తనిఖీ చేయండి: లోగోలు, ఐకాన్లు, తెలుపు బ్యాక్‌గ్రౌండ్ ఉన్న చిత్రాలు, చార్ట్‌లు, కోడ్ బ్లాక్‌లు, మ్యాప్‌లు, ఎంబెడ్‌లు, ఇమెయిల్‌లు.
7. రెండు థీమ్‌లను పరీక్షించండి డెస్క్‌టాప్ మరియు ఫోన్‌లో, సిస్టమ్ లైట్ మరియు డార్క్‌కి సెట్ చేసి, మరియు హార్డ్ రిఫ్రెష్ తర్వాత.

సాధారణ తప్పులు

• ప్రతిదీ విలోమం చేయడం. రంగులను విలోమం చేసే ఫిల్టర్ ఫోటోలు మరియు బ్రాండ్ రంగులను పాడుచేస్తుంది.
• హార్డ్-కోడ్ చేసిన రంగులు మిగిలిపోవడం. డార్క్ పేజీలో ఒక తెల్ల కార్డ్ వెంటనే కనిపిస్తుంది.
• తక్కువ-కాంట్రాస్ట్ బూడిద టెక్స్ట్. స్టైలిష్‌గా కనిపిస్తుంది, చదవడంలో విఫలమవుతుంది.
• లోడ్‌పై తెల్ల ఫ్లాష్. ముఖ్యంగా రాత్రి ఫోన్‌లలో గమనించదగినది.
• థర్డ్-పార్టీ ఎంబెడ్‌లను మర్చిపోవడం. మ్యాప్‌లు, వీడియోలు మరియు విడ్జెట్‌లు లైట్‌గా ఉండిపోవచ్చు; వాటికి డార్క్ ఆప్షన్ ఉందో లేదో తనిఖీ చేయండి.
• రెండు స్థితులు మాత్రమే ఉన్న టోగుల్. ఎవరైనా దాన్ని క్లిక్ చేసిన తర్వాత, సిస్టమ్‌ని అనుసరించడానికి తిరిగి వెళ్లలేరు.
• లైట్ థీమ్‌ని పాడుచేయడం. లైట్ డిజైన్ అలాగే ఉండాలని మీ ప్రాంప్ట్‌లో స్పష్టంగా చెప్పండి.

చెక్‌లిస్ట్

• అన్ని రంగులు థీమ్ టోకెన్ల నుండి వస్తాయి
• డిఫాల్ట్‌గా సిస్టమ్ సెట్టింగ్‌ని అనుసరిస్తుంది
• Light, Dark మరియు System తో ఐచ్ఛిక టోగుల్, గుర్తుంచుకోబడుతుంది
• లోడ్ లేదా రిఫ్రెష్‌పై తెల్ల ఫ్లాష్ లేదు
• ఫారమ్ కంట్రోల్స్ మరియు స్క్రోల్‌బార్లు సరిపోయేలా color-scheme సెట్ చేయబడింది
• రెండు థీమ్‌లలో టెక్స్ట్ కాంట్రాస్ట్ కనీసం 4.5:1
• లోగోలు, చిత్రాలు, చార్ట్‌లు మరియు ఎంబెడ్‌లు డార్క్ మోడ్‌లో తనిఖీ చేయబడ్డాయి
• లైట్ థీమ్ మారలేదు
• డెస్క్‌టాప్ మరియు ఫోన్‌లో పరీక్షించబడింది

Mythex తో డార్క్ మోడ్

Mythex పై నిర్మించిన యాప్‌లు డిఫాల్ట్‌గా Vite, React, TypeScript మరియు Tailwind వాడతాయి, కాబట్టి పైన ఉన్న Tailwind విధానం నేరుగా వర్తిస్తుంది: పూర్తి-సెటప్ ప్రాంప్ట్‌ని చాట్‌లో అతికించి, ఆపై రెండు థీమ్‌లలో మరియు ఫోన్ సైజ్‌లో Previewని తనిఖీ చేయండి. Mythex యొక్క డిజైన్ ప్రాంప్టింగ్ సలహా ఏం మార్చాలో మరియు ఏం ఉంచాలో పేర్కొనమని చెబుతుంది, ఇక్కడ ఇది ముఖ్యం — లైట్ థీమ్ అలాగే ఉండాలని చెప్పండి. Design & UI ప్రాంప్ట్‌లు చూడండి, మరియు ఒక పాస్ తప్పుగా జరిగితే చెక్‌పాయింట్‌తో వెనక్కి తీసుకోండి.

లుక్ సరిగ్గా రావడం గురించి మరింత కోసం, AI తో మంచి-కనిపించే యాప్ ఎలా డిజైన్ చేయాలి మరియు AI యాప్ బిల్డర్‌ల కోసం ప్రాంప్ట్‌లు ఎలా రాయాలి చూడండి.

ప్రశ్నలు