તમારી વેબસાઇટ કે એપમાં ડાર્ક મોડ કેવી રીતે ઉમેરવો (ફ્લેશ વગર)

ડાર્ક મોડ ઉમેરવા માટે, તમારા રંગોને હાર્ડ-કોડેડ મૂલ્યોને બદલે નામવાળા ટોકન (background, text, surface, border, accent) તરીકે વ્યાખ્યાયિત કરો, દરેક ટોકનને લાઇટ અને ડાર્ક મૂલ્ય આપો, અને CSS prefers-color-scheme મીડિયા ફીચર વડે તેમની વચ્ચે બદલો જેથી સાઇટ મુલાકાતીની સિસ્ટમ સેટિંગ અનુસરે. જો તમને મેન્યુઅલ ટૉગલ પણ જોઈએ, તો પસંદગી બ્રાઉઝરમાં સાચવો અને પેજના head માં એક નાની ઇનલાઇન સ્ક્રિપ્ટ વડે લાગુ કરો જેથી લોડ વખતે સફેદ ફ્લેશ ન થાય. પછી બંને થીમમાં કોન્ટ્રાસ્ટ, ઇમેજ અને ચાર્ટ તપાસો. 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 ક્લાસ ઉમેરે કે કાઢે છે. દસ્તાવેજો head માં એક ઇનલાઇન સ્ક્રિપ્ટનું પણ સૂચન કરે છે જે પેજ પેઇન્ટ થતાં પહેલાં સાચવેલી પસંદગી (અથવા સિસ્ટમ સેટિંગ) લાગુ કરે — ફ્લેશ ટાળવાની આ જ રીત છે.

સફેદ ફ્લેશ ટાળવી

ફ્લેશ એટલે થાય છે કે પેજ પહેલા લાઇટ મોડમાં પેઇન્ટ થાય છે, પછી JavaScript લોડ થાય, સાચવેલી પસંદગી વાંચે, અને ડાર્કમાં બદલે. ઉકેલ:

1. head માં એક નાની ઇનલાઇન સ્ક્રિપ્ટ મૂકો જે સાચવેલી થીમ વાંચે અને કંઈ રેન્ડર થાય તે પહેલાં રૂટ એલિમેન્ટ પર ક્લાસ સેટ કરે.
2. દરેક થીમ માટે color-scheme CSS પ્રોપર્ટી સેટ કરો, જેથી બ્રાઉઝર દ્વારા દોરાતા ભાગો (સ્ક્રોલબાર, ફોર્મ કન્ટ્રોલ) મેળ ખાય.
3. બંને થીમમાં પેજને સ્પષ્ટ બેકગ્રાઉન્ડ કલર આપો.
4. જો એપ સર્વર-રેન્ડર્ડ હોય, તો ખાતરી કરો કે સર્વર અને બ્રાઉઝર શરૂઆતની થીમ પર સહમત છે, નહીંતર પેજ ફરી રેન્ડર થઈ ઝબકી શકે.

ઉદાહરણ પ્રોમ્પ્ટ

સંપૂર્ણ સેટઅપ:

ડાર્ક મોડ ઉમેરો. પહેલા હાર્ડ-કોડેડ રંગોને થીમ ટોકન (background, surface, text, muted text, border, accent) થી બદલો, જેમાં લાઇટ અને ડાર્ક મૂલ્યો હોય. મુલાકાતીની સિસ્ટમ સેટિંગ ડિફોલ્ટ રાખો. હેડરમાં Light, Dark અને System વિકલ્પો સાથે થીમ સ્વિચ ઉમેરો, પસંદગી localStorage માં યાદ રાખો, અને તેને head માં ઇનલાઇન સ્ક્રિપ્ટ વડે લાગુ કરો જેથી લોડ વખતે સફેદ ફ્લેશ ન થાય. દરેક થીમ માટે color-scheme સેટ કરો. હાલની લાઇટ ડિઝાઇન બરાબર એવી જ રાખો.

બાકી રહેલું ઠીક કરવું:

ડાર્ક મોડમાં દરેક પેજ તપાસો અને ઠીક કરો: ઓછા કોન્ટ્રાસ્ટવાળું લખાણ (ઓછામાં ઓછા 4.5:1 નું લક્ષ્ય), હાર્ડ-કોડેડ સફેદ બેકગ્રાઉન્ડ, ગાયબ થતી બોર્ડર, ઘેરા બેકગ્રાઉન્ડ પર ઘેરા લખાણવાળા ચાર્ટ, અને ગાયબ થતા લોગો. લાઇટ થીમ બદલશો નહીં.

ઇમેજ અને ચાર્ટ:

ડાર્ક મોડમાં લોગોનું લાઇટ વર્ઝન વાપરો. ચાર્ટ એક્સિસ, ગ્રિડલાઇન અને લેબલ થીમ ટોકન વાપરે તેમ બનાવો. ડાર્ક મોડમાં સ્ક્રીનશોટને હળવી બોર્ડર આપો જેથી તે બેકગ્રાઉન્ડમાં ભળી ન જાય.

સ્ટેપ બાય સ્ટેપ

1. રંગોનું ઓડિટ કરો. હાર્ડ-કોડેડ રંગ શોધો અને તેને ટોકનથી બદલો. મોટા ભાગનું કામ આ જ છે.
2. દરેક ટોકન માટે ડાર્ક મૂલ્યો વ્યાખ્યાયિત કરો.
3. prefers-color-scheme (અથવા Tailwind નું ડિફોલ્ટ dark:) વડે સિસ્ટમ અનુસરો.
4. જો જોઈતું હોય તો ટૉગલ ઉમેરો: Light, Dark, System. પસંદગી બ્રાઉઝરમાં સાચવો; લૉગ ઇન થયેલી એપ માટે તેને વપરાશકર્તાની પ્રોફાઇલમાં પણ સાચવી શકાય.
5. ઇનલાઇન head સ્ક્રિપ્ટ અને color-scheme વડે ફ્લેશ અટકાવો.
6. મુશ્કેલ ભાગો તપાસો: લોગો, આઇકન, સફેદ બેકગ્રાઉન્ડવાળી ઇમેજ, ચાર્ટ, કોડ બ્લોક, નકશા, એમ્બેડ, ઈમેલ.
7. બંને થીમ પરીક્ષણ કરો ડેસ્કટોપ અને ફોન પર, સિસ્ટમ લાઇટ અને ડાર્ક બંને સેટ હોય ત્યારે, અને હાર્ડ રિફ્રેશ પછી.

સામાન્ય ભૂલો

• બધું ઊલટાવવું. રંગો ઊલટાવતો ફિલ્ટર ફોટો અને બ્રાન્ડ રંગોને બગાડે છે.
• હાર્ડ-કોડેડ રંગો બાકી રહેવા. ડાર્ક પેજ પર એક સફેદ કાર્ડ તરત જ અલગ દેખાય.
• ઓછા કોન્ટ્રાસ્ટવાળો ગ્રે લખાણ. સ્ટાઇલિશ લાગે, પણ વાંચનક્ષમતામાં નિષ્ફળ.
• લોડ પર સફેદ ફ્લેશ. ખાસ કરીને રાત્રે ફોન પર ધ્યાનપાત્ર.
• થર્ડ-પાર્ટી એમ્બેડ ભૂલી જવા. નકશા, વિડિયો અને વિજેટ લાઇટ રહી શકે; તે ડાર્ક વિકલ્પ ધરાવે છે કે નહીં તે તપાસો.
• ફક્ત બે સ્થિતિવાળું ટૉગલ. કોઈ એક વાર ક્લિક કરે, પછી તે સિસ્ટમ અનુસરવા પાછા જઈ શકતા નથી.
• લાઇટ થીમ તોડવી. તમારા પ્રોમ્પ્ટમાં સ્પષ્ટ કહો કે લાઇટ ડિઝાઇન એવી જ રહેવી જોઈએ.

ચેકલિસ્ટ

• બધા રંગો થીમ ટોકનમાંથી આવે છે
• ડિફોલ્ટ રીતે સિસ્ટમ સેટિંગ અનુસરે છે
• Light, Dark અને System સાથેનું વૈકલ્પિક ટૉગલ, યાદ રાખેલું
• લોડ કે રિફ્રેશ પર સફેદ ફ્લેશ નથી
• ફોર્મ કન્ટ્રોલ અને સ્ક્રોલબાર મેળ ખાય તે માટે color-scheme સેટ
• બંને થીમમાં લખાણનો કોન્ટ્રાસ્ટ ઓછામાં ઓછો 4.5:1
• લોગો, ઇમેજ, ચાર્ટ અને એમ્બેડ ડાર્ક મોડમાં તપાસ્યા
• લાઇટ થીમ યથાવત
• ડેસ્કટોપ અને ફોન પર પરીક્ષણ થયું

Mythex સાથે ડાર્ક મોડ

Mythex પર બનેલી એપ ડિફોલ્ટ રીતે Vite, React, TypeScript અને Tailwind વાપરે છે, એટલે ઉપરનો Tailwind અભિગમ સીધો લાગુ પડે છે: સંપૂર્ણ સેટઅપ પ્રોમ્પ્ટ ચેટમાં પેસ્ટ કરો, પછી બંને થીમમાં અને ફોનના કદમાં Preview તપાસો. Mythex ની ડિઝાઇન પ્રોમ્પ્ટિંગની સલાહ એ છે કે શું બદલવું અને શું રાખવું તે નામ આપો, જે અહીં મહત્ત્વનું છે — કહો કે લાઇટ થીમ એવી જ રહેવી જોઈએ. Design & UI prompts જુઓ, અને કોઈ પાસ ખોટો જાય તો ચેકપોઇન્ટ વડે રોલબેક કરો.

લુક બરાબર લાવવા પર વધુ માટે, AI વડે સારી દેખાતી એપ કેવી રીતે ડિઝાઇન કરવી અને AI એપ બિલ્ડર માટે પ્રોમ્પ્ટ કેવી રીતે લખવા જુઓ.

પ્રશ્નો