Website သို့မဟုတ် App သို့ Dark Mode ထည့်နည်း (White Flash မရှိစေရန်)

Dark mode ထည့်ရန် သင့် အရောင်များကို hard-code တန်ဖိုးများအစား အမည်ပေးထားသော token များ (background၊ text၊ surface၊ border၊ accent) အဖြစ် သတ်မှတ်ပါ၊ token တစ်ခုစီကို light နှင့် dark တန်ဖိုး နှစ်ခု ပေးပါ၊ ထို့နောက် CSS prefers-color-scheme media feature ဖြင့် ပြောင်းပါ ထို့ကြောင့် site က ဧည့်သည်၏ system ဆက်တင်ကို လိုက်သည်။ Manual toggle လည်း လိုချင်လျှင် ရွေးချယ်မှုကို browser တွင် သိမ်းပြီး page head ထဲရှိ inline script ငယ်လေးဖြင့် အသုံးချပါ- load တွင် white flash မရှိစေရန်။ ထို့နောက် theme နှစ်ခုလုံးတွင် contrast၊ ပုံများနှင့် chart များကို စစ်ပါ။ AI app builder တွင် prompt တစ်ခုတည်းဖြင့် အများစုကို လုပ်နိုင်သည်၊ အရည်အသွေး ဆုံးဖြတ်သည့်အရာမှာ စစ်ဆေးခြင်း ဖြစ်သည်။

ချဉ်းကပ်ပုံ နှစ်မျိုး

အများစု app များသည် ဒုတိယနည်းဖြင့် ပိုကောင်းသည်- စနစ်ကို ပုံမှန်အတိုင်း လေးစားပြီး လူများကို ကျော်ရန် ခွင့်ပေးပါ။

Color token များဖြင့် စတင်ပါ

Dark mode သည် white၊ #333 နှင့် gray-100 ကဲ့သို့ code အနှံ့ ပြန့်ကျဲနေသော အရောင်များနှင့် ခက်ခဲသည်။ အရောင် အားလုံးကို အမည်ပေးထားသော token အစုသေးတစ်ခုမှ လာသောအခါ လွယ်ကူသည်-

Component တိုင်းသည် token အမည်များကို သုံးသည်။ Theme ပြောင်းခြင်းသည် တန်ဖိုးအစု တစ်ခုကို လဲလှယ်ခြင်းသာ ဖြစ်ပြီး component တိုင်းကို ပြင်ရန် မလိုပါ။

Dark palette အတွက် အကြံပြုချက်များ-

• ကြီးမားသော ဧရိယာများအတွက် အမဲရောင်သန့်နှင့် အဖြူရောင်သန့်ကို ရှောင်ပါ။ အလွန်မှောင်သော မီးခိုးရောင်နှင့် အဖြူနွဲ့နွဲ့က ဖတ်ရလွယ်သည်။
• အရောင်ပိုပွင့်သော မျက်နှာပြင်များဖြင့် အနက်အရှိန် ပြပါ၊ shadow ဖြင့် မဟုတ်ပါ- shadow များသည် မှောင်နောက်ခံပေါ်တွင် မသိသာပါ။
• တောက်ပသော brand အရောင်များကို အနည်းငယ် လျှော့ပါ၊ dark နောက်ခံပေါ်တွင် မသက်သာစွာ လင်းနေနိုင်သည်။
• Contrast ကို ဖတ်လို့ရအောင် ထားပါ။ WCAG AA အဆင့်သည် ပုံမှန် စာသားအတွက် အနည်းဆုံး 4.5:1 contrast တောင်းသည်။ မှိန်သော မီးခိုးရောင် စာသားသည် dark theme များတွင် များသောအားဖြင့် မအောင်မြင်ပါ။

Tailwind CSS ဖြင့်

Tailwind သည် AI ဖြင့် တည်ဆောက်သော app အများအပြားတွင် default styling tool ဖြစ်သည်။ Tailwind ၏ dark mode docs အရ dark: variant သည် ပုံမှန်အားဖြင့် prefers-color-scheme ကို သုံးသည်၊ ထို့ကြောင့် bg-white dark:bg-gray-900 ကဲ့သို့ class များသည် အပိုအလုပ်မလုပ်ဘဲ စနစ်ဆက်တင်ကို လိုက်သည်။

Tailwind v4 တွင် manual toggle အတွက် docs က variant ကို parent element ပေါ်ရှိ class သို့ ပြောင်းရန် ပြသသည်-

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

ထို့နောက် app က root element ပေါ်တွင် dark class ကို ထည့်ပါ သို့မဟုတ် ဖယ်ပါ။ Docs က head ထဲရှိ inline script ကိုလည်း အကြံပြုသည်၊ ၎င်းသည် သိမ်းထားသော ရွေးချယ်မှု (သို့မဟုတ် စနစ်ဆက်တင်) ကို စာမျက်နှာ paint မလုပ်မီ အသုံးချသည်- ၎င်းသည် flash ကို ရှောင်ရှားနည်း ဖြစ်သည်။

White flash ကို ရှောင်ခြင်း

Flash ဖြစ်ရခြင်းမှာ စာမျက်နှာသည် light mode ဖြင့် paint လုပ်ပြီးနောက် JavaScript load လုပ်ကာ သိမ်းထားသော ရွေးချယ်မှုကို ဖတ်ပြီး dark သို့ ပြောင်းသောကြောင့် ဖြစ်သည်။ ဖြေရှင်းနည်း-

1. Page head တွင် inline script ငယ်လေး ထည့်ပါ၊ ၎င်းက သိမ်းထားသော theme ကို ဖတ်ပြီး ဘာမျှ render မလုပ်မီ root element ပေါ်တွင် class ကို သတ်မှတ်သည်။
2. Theme တစ်ခုစီအတွက် color-scheme CSS property ကို သတ်မှတ်ပါ၊ browser က ရေးဆွဲသော အစိတ်အပိုင်းများ (scrollbar၊ form control များ) ကိုက်ညီစေရန်။
3. Theme နှစ်ခုလုံးတွင် page အတွက် ရှင်းလင်းသော background color ထားပါ။
4. App ကို server-side render လုပ်ပါက server နှင့် browser က စတင်သော theme ကို သဘောတူစေပါ၊ မဟုတ်ပါက page ပြန် render ဖြစ်ပြီး မှိတ်တုတ်ဖြစ်နိုင်သည်။

ဥပမာ prompts

Setup အပြည့်အစုံ-

Dark mode ထည့်ပါ။ ပထမဦးစွာ hard-code အရောင်များကို theme token များ (background၊ surface၊ text၊ muted text၊ border၊ accent) ဖြင့် light နှင့် dark တန်ဖိုးများဖြင့် အစားထိုးပါ။ Default အဖြစ် ဧည့်သည်၏ စနစ်ဆက်တင်ကို သုံးပါ။ Header တွင် Light၊ Dark နှင့် System ရွေးချယ်စရာပါသော theme switch ထည့်ပါ၊ ရွေးချယ်မှုကို localStorage တွင် မှတ်ထားပြီး head ရှိ inline script ဖြင့် အသုံးချ၍ load တွင် white flash မရှိစေပါ။ Theme တစ်ခုစီအတွက် color-scheme သတ်မှတ်ပါ။ လက်ရှိ light design ကို အတိအကျ ထားပါ။

ကျန်နေသောအရာများ ပြင်ရန်-

Dark mode တွင် စာမျက်နှာတိုင်းကို စစ်ပြီး ပြင်ပါ- contrast နိမ့်သော စာသား (အနည်းဆုံး 4.5:1 ရည်ရွယ်)၊ hard-code ထားသော အဖြူ နောက်ခံများ၊ လောင်းမရှိတော့သော border များ၊ dark နောက်ခံပေါ်ရှိ မှောင်သော စာသားပါ chart များ၊ ပျောက်နေသော logo များ။ Light theme ကို မပြောင်းပါနှင့်။

ပုံများနှင့် chart များ-

Dark mode တွင် logo ၏ light ဗားရှင်းကို သုံးပါ။ Chart axis၊ gridline နှင့် label များက theme token များကို သုံးစေပါ။ Dark mode တွင် screenshot များကို နောက်ခံနှင့် မပေါင်းစပ်စေရန် အနည်းငယ်ရှိသော border ထည့်ပါ။

အဆင့်လိုက် လုပ်ဆောင်ပုံ

1. အရောင်များကို စစ်ဆေးပါ။ Hard-code အရောင်များကို ရှာပြီး token များဖြင့် အစားထိုးပါ။ ဤသည်မှာ အလုပ်အများစု ဖြစ်သည်။
2. Token တစ်ခုစီအတွက် dark တန်ဖိုးများ သတ်မှတ်ပါ။
3. prefers-color-scheme ဖြင့် စနစ်ကို လိုက်ပါ (သို့မဟုတ် Tailwind ၏ default dark:)။
4. Toggle ထည့်ပါ လိုချင်လျှင်- Light၊ Dark၊ System။ ရွေးချယ်မှုကို browser တွင် သိမ်းပါ၊ logged-in app များအတွက် အသုံးပြုသူ profile တွင်လည်း သိမ်းနိုင်သည်။
5. Flash ကို ကာကွယ်ပါ head inline script နှင့် color-scheme ဖြင့်။
6. ခက်သော အပိုင်းများကို စစ်ပါ- logo၊ icon၊ အဖြူ နောက်ခံပါ ပုံများ၊ chart များ၊ code block များ၊ map များ၊ embed များ၊ email များ။
7. Theme နှစ်ခုလုံးကို စမ်းပါ desktop နှင့် ဖုန်းတွင်၊ စနစ်ကို light နှင့် dark နှစ်ခုလုံးတွင်၊ hard refresh ပြီးနောက်။

အဖြစ်များသော အမှားများ

• အရာအားလုံးကို ပြောင်းပစ်ခြင်း။ အရောင်များကို ပြောင်းသော filter သည် ဓာတ်ပုံများနှင့် brand အရောင်များကို ဖျက်ဆီးသည်။
• Hard-code အရောင်များ ကျန်နေခြင်း။ Dark page ထဲ အဖြူ card တစ်ခုသည် ချက်ချင်း ထင်ရှားသည်။
• Contrast နိမ့်သော မီးခိုးရောင် စာသား။ ပုံစံကျသော်လည်း ဖတ်ရခက်သည်။
• Load တွင် white flash။ အထူးသဖြင့် ည ဖုန်းတွင် သိသာသည်။
• တတိယပါတီ embed များကို မေ့ခြင်း။ Map၊ video နှင့် widget များသည် အလင်းရောင် ဆက်ကျန်နိုင်သည်၊ dark option ရှိ/မရှိ စစ်ပါ။
• နှစ်ခုတည်းရှိသော toggle။ တစ်ခါ နှိပ်ပြီးနောက် စနစ်ကို ပြန်လိုက်ရန် မရနိုင်တော့ပါ။
• Light theme ကို ပျက်စီးစေခြင်း။ Light design မပြောင်းရန် prompt တွင် ရှင်းရှင်း ပြောပါ။

Checklist

• အရောင်အားလုံး theme token များမှ လာသည်
• Default အဖြစ် စနစ်ဆက်တင်ကို လိုက်သည်
• Light၊ Dark၊ System ပါသော optional toggle၊ မှတ်ထားသည်
• Load သို့မဟုတ် refresh တွင် white flash မရှိ
• Form control နှင့် scrollbar ကိုက်ညီစေရန် color-scheme သတ်မှတ်ထား
• Theme နှစ်ခုလုံးတွင် စာသား contrast အနည်းဆုံး 4.5:1
• Logo၊ ပုံ၊ chart နှင့် embed များကို dark mode တွင် စစ်ပြီး
• Light theme မပြောင်းလဲ
• Desktop နှင့် ဖုန်းတွင် စမ်းပြီး

Mythex ဖြင့် dark mode

Mythex ဖြင့် တည်ဆောက်သော app များသည် ပုံမှန်အားဖြင့် Vite၊ React၊ TypeScript နှင့် Tailwind ကို သုံးသဖြင့် အထက်ပါ Tailwind ချဉ်းကပ်ပုံသည် တိုက်ရိုက် သက်ဆိုင်သည်- setup အပြည့်အစုံ prompt ကို chat ထဲ ကူးထည့်ပြီး Preview ကို theme နှစ်ခုလုံးနှင့် ဖုန်းအရွယ်တွင် စစ်ပါ။ Mythex ၏ design prompting အကြံပြုချက်မှာ ပြောင်းရမည်နှင့် ထားရမည်ကို အမည်ပေးရန် ဖြစ်ပြီး ဤအခြေအနေတွင် light theme ကို အတိုင်းထားရမည်ဟု ပြောပါ။ Design & UI prompts ကို ကြည့်ပါ၊ pass တစ်ခု မှားသွားပါက checkpoint ဖြင့် ပြန်သွားပါ။

ပိုမို ကောင်းမွန်သော အသွင်အပြင် ရရှိရန် AI ဖြင့် အသွင်အပြင် ကောင်းသော app ဒီဇိုင်းနည်း နှင့် AI app builder များအတွက် prompt ရေးနည်း ကို ကြည့်ပါ။

မေးခွန်းများ