Project 3: Theme Switcher

အခုနောက်ပိုင်း Web/App တွေတိုင်းမှာ Dark Mode (အမှောင် theme) က မပါမဖြစ် ခေတ်စားနေတာ ဆိုတော့ ကိုယ့် Website မှာလည်း ဒါလေးကို အလွယ်တကူ ဘယ်လို ထည့်သွင်းရမလဲ ဆိုတာကို ရေးကြည့်ကြပါမယ်။

၁။ CSS Setup (ဒီဇိုင်း ပြင်ဆင်ခြင်း)

အရင်ဆုံး CSS ထဲမှာ Light Mode အတွက်ရော၊ Dark Mode အတွက်ပါ လိုအပ်တဲ့ အရောင်တွေကို ကြိုတင် သတ်မှတ်ထားရပါမယ်။

/* Default အနေအထား (Light Mode) */
body {
    background-color: white;
    color: black;
    transition: 0.3s; /* အရောင်ပြောင်းတဲ့အခါ ရုတ်တရက်ကြီး မဖြစ်ဘဲ ဖြည်းဖြည်းချင်း အိသက်စွာ ပြောင်းလဲသွားစေရန် */
}

/* Dark Mode ဖြစ်သွားသည့်အခါ ဝင်ရောက် အလုပ်လုပ်မည့် Class */
body.dark-mode {
    background-color: #333333;
    color: white;
}

၂။ HTML Button (ခလုတ် ဖန်တီးခြင်း)

Theme ပြောင်းဖို့အတွက် ခလုတ်လေး တစ်ခု ဖန်တီးပါမယ်။

<button id="theme-toggle">Switch Theme 🌙</button>

၃။ JavaScript Magic (အသက်သွင်းခြင်း)

JavaScript ရဲ့ လုပ်ဆောင်ချက်က အရမ်း ရိုးရှင်းပါတယ်။ ခလုတ်ကို နှိပ်လိုက်တဲ့အခါ body Element မှာ dark-mode ဆိုတဲ့ Class မရှိရင် ထည့်ပေးမယ်၊ ရှိနေရင် ပြန်ဖြုတ်ပေးမယ်။ ဒီအလုပ်ကို classList.toggle က အလွယ်တကူ လုပ်ပေးသွားမှာပါ။

const toggleBtn = document.getElementById("theme-toggle");
// body ကို document.body သုံးပြီး တိုက်ရိုက် လွယ်ကူစွာ Select လုပ်နိုင်ပါတယ်
const body = document.body;

toggleBtn.addEventListener("click", function() {
    // classList.toggle သည် Class ရှိနေလျှင် ဖယ်ရှားပေးပြီး၊ မရှိလျှင် အသစ်ထည့်သွင်းပေးပါသည်
    body.classList.toggle("dark-mode");

    // လက်ရှိ အခြေအနေပေါ် မူတည်ပြီး ခလုတ်ပေါ်က စာသားကိုပါ လိုက်ပြောင်းချင်တယ် ဆိုရင်
    if (body.classList.contains("dark-mode")) {
        toggleBtn.innerText = "Switch to Light ☀️";
    } else {
        toggleBtn.innerText = "Switch to Dark 🌙";
    }
});

Extra Credit: User Preference သိမ်းဆည်းခြင်း (LocalStorage အသုံးပြုနည်း)

အထက်ပါ Code အတိုင်းဆိုရင်၊ အလုပ်တော့ လုပ်ပေမယ့် Browser ပိတ်ပြီး ပြန်ဖွင့်လိုက်တဲ့အခါတိုင်း မူရင်း (Light Mode) အတိုင်းပဲ အမြဲတမ်း ပြန်ဖြစ်နေပါလိမ့်မယ်။ User ရွေးချယ်ထားတဲ့ Theme ကို Browser ကနေ အမြဲတမ်း မှတ်ထားစေချင်ရင် localStorage (Browser ၏ သိုလှောင်ခန်း) ကို အသုံးပြုရပါတယ်။

// Data ကို မှတ်သား (Save) လုပ်လိုသောအခါ
localStorage.setItem("theme", "dark");

// မှတ်သားထားသော Data ကို ပြန်လည် ရယူ (Get) လိုသောအခါ
let savedTheme = localStorage.getItem("theme");

ဒီ သဘောတရားကို အသုံးပြုပြီး သင့်ရဲ့ Theme Switcher Project လေးကို Browser ပိတ်လိုက်လည်း Theme ပြန်မပျက်သွားအောင် Upgrade လုပ်ကြည့်ပါ။ (လက်တွေ့ လုပ်ငန်းခွင် အတွေ့အကြုံအတွက် အလွန် အထောက်အကူ ဖြစ်ပါလိမ့်မယ်)