Kal raat 1:30 baje mere ek dost ka message aaya - "Bhai teri site raat me kholte hi aankh dukhne lagti hai, thoda light kam kar de yaar". Tab mujhe ehsaas hua ki maine apni site par sab kuch lagaya, par Dark Mode hi nahi lagaya.
Aur sach batau to usi raat maine check kiya to 70% log meri site raat me hi kholte hain. Matlab mai apne 70% visitors ko bhaga raha tha.
Agar aap bhi soch rahe ho ki "Dark mode se kya hoga, design hi to hai" to aap bahut badi galti kar rahe ho. Aaj mai aapko wahi galti sudharne ka tarika bataunga jo maine usi raat 2 baje kiya tha, aur meri site ka average time 40 second se 3 minute tak chala gaya.
Is post me 2 cheeze chhupi hain jo aapko koi YouTube video nahi batayega - Ek to bina site slow kiye dark mode kaise lagaye, aur dusra visitor ka theme yaad kaise rakhe. To end tak padhna.
Log Aapki Site Chhod Kar Kyu Chale Jate Hain? Asli Wajah
Dekho, Google ne khud bola hai ki agar koi user aapki site 10 second me chhod de to Google samajhta hai content bekaar hai. Isko Bounce Rate kehte hain.
White background ka sabse bada dushman hai raat.
![]() |
| Result: Left me normal mode, Right me dark mode |
Aap khud socho:
- 1. Aankho Me Jalan: Andhere me tez white light padhte hi aankh me dard hota hai. User turant back button dabata hai.
- 2. Sasti Website Ka Feel: 2026 me YouTube, Insta, WhatsApp sab me dark mode hai. Agar aapki site me nahi hai to wo sasti lagti hai.
- 3. Battery Ka Khel: Aapko pata hai? AMOLED phone me black pixel battery use hi nahi karta. Matlab dark mode se user ki battery bachti hai. Aur user wahi rukta hai jahan uska fayda ho.
To ab sawal ye nahi hai ki dark mode lagana chahiye ya nahi, sawal ye hai ki free me aur bina coding ke kaise lagaye?
Sabse Badi Galti Jo 90% Blogger Karte Hain
Youtube par aapko 10 video milenge jo bolenge ye plugin lagao, wo javascript lagao. Maine bhi wahi kiya tha pehle.
Result? Meri site 3 second ki jagah 7 second me khulne lagi. Aur Google ne ranking gira di.
Plugin se 2 problem hoti hai:
1. Wo pura heavy CSS load karta hai jo aapki Template theme ko tod deta hai.
2. Har baar page reload par light mode par wapas aa jata hai. User irritate ho jata hai.
Isliye mai aapko jo tarika bata raha hu usme no plugin, no heavy code, sirf 15 line ka CSS. Aur ek baar user ne dark mode ON kiya to agli baar site khud dark me khulegi. Yehi secret trick hai jo log chhupate hain.
Chalo Ab Asli Kaam Karte Hain - Step 1: CSS Ko Samjho
Darna mat, coding nahi karni. Bas copy-paste karna hai. Aapko apne Blogger ke Theme > Edit HTML me jana hai.
Ab ]]</b:skin> likh kar search karo. Uske bilkul upar ye code chipka do. Ye code maine specially NewsLite ke liye banaya hai.
:root{ --bg: #fff; --text: #111; --card: #f9f9f9; }
[data-theme="dark"]{ --bg: #0f0f0f; --text: #e4e4e4; --card: #1c1c1c; }
body{background: var(--bg) !important; color: var(--text) !important; transition: 0.3s;}
.post-body, .sidebar{background: var(--card) !important;}
![]() |
Step 1: |
Ye kya karega? Ye aapki site ko 2 rang sikha dega. Ek normal white, dusra dark. Jaise hi hum bolenge dark ho ja, ye turant rang badal dega. Aur transition: 0.3s se ek smooth wala effect aayega, jo dekhne me premium lagta hai.
Step 2: Wo Jadooi Button Banana Jisse Light ON/OFF Hogi
Ab sabse mazedar hissa. Hame ek button chahiye. Par wo boring wala nahi, thoda stylish wala.
Layout > Add a Gadget > HTML/JavaScript me jao aur ye code dalo:
<div style="text-align:center; margin:10px 0;"> <label style="cursor:pointer; background:#2962FF; color:#fff; padding:8px 15px; border-radius:20px;"> <input type="checkbox" id="darkToggle" style="display:none;"> 🌙 Dark Mode ON Karo </label> </div>
Ab tak button dikhega par kaam nahi karega. Kaam karne ke liye iska dimaag lagana padega, matlab JavaScript.
Iska Dimaag - JavaScript Code (Sabse Important)
Usi Gadget me is HTML ke neeche ye script paste kar do. Ye wala code hi aapko sabse alag banata hai.
<script>
const btn = document.getElementById('darkToggle');
btn.addEventListener('change', () => {
if(btn.checked){
document.documentElement.setAttribute('data-theme','dark');
localStorage.setItem('blogTheme','dark');
} else {
document.documentElement.setAttribute('data-theme','light');
localStorage.setItem('blogTheme','light');
}
});
if(localStorage.getItem('blogTheme') == 'dark'){
document.documentElement.setAttribute('data-theme','dark');
btn.checked = true;
}
</script>
Ye localStorage wala line sabse khatarnak hai. Iska matlab hai agar user ne ek baar dark mode kiya, to agle 1 saal tak jab bhi wo aapki site kholega, site direct dark mode me khulegi. User sochega - "Wah, ye site to mujhe yaad rakhti hai". Aur wahi user wapas aata hai.
Final Check - Kahi Aapne Ye Galti To Nahi Ki?
Kaam khatam hone ke baad ek baar mobile me check karna. Mere sath pehli baar hua tha ki mera logo white background par white ho gaya tha. Agar aisa ho to apne logo me thoda border laga do.
To kaisa laga ye tarika? Maine poori koshish ki hai aapko simple bhasha me samjhau, bina faltu ki angrezi ke.
Ab aapki baari hai - niche comment karke batao aapki site par dark mode chala ya nahi? Agar kahi atak jao to screenshot bhej do, mai khud code laga dunga.
Aise hi Blogger ki asli tricks ke liye Alleasything ko Bookmark kar lo, kyuki yahan bakwas nahi, sirf kaam ki baat hoti hai.
![]() |
| Final Step: Toggle button aise dikhega, user yahan se mode badal sakta hai |
Ye bhi padhe: Cryptocurrency Kya Hai? Blockchain Ne Kaise Badli Puri Duniya? 2026 Ki Sacchai




