How to Add Dark Mode Toggle in Blogger

 No dark mode = users leave at night. 81% of users prefer dark mode. Better UX = higher AdSense RPM.

In this tutorial, you'll add a dark mode toggle to Blogger with one click switch. Follow along and you'll keep readers on site longer in 2025.

Step 1: Why Dark Mode Increases Blog Revenue 2025

Dark mode isn't just design. It impacts money.

1. Longer sessions: 15% more time on site at night = more ad impressions
2. Lower bounce rate: Users don't exit due to bright screen glare
3. Battery savings: OLED phones use 60% less battery on dark mode
4. Modern UX: Google, YouTube, Instagram all have dark mode

Image: Dark mode toggle button on popular blog

Step 2: Add Dark Mode Toggle Button to Blogger

This code adds toggle + saves user choice in browser.

1. Blogger → Theme → Edit HTML → Ctrl+F → Search </head>
2. Paste this CSS + JS code ABOVE </head>:

<style>
/* Dark Mode Toggle Button */
.dark-toggle {
position: fixed; top: 15px; right: 15px; z-index: 9999;
background: #333; color: #fff; border: none;
padding: 8px 12px; border-radius: 20px; cursor: pointer;
font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.dark-toggle:hover {background: #555;}

/* Dark Mode Styles */
body.dark-mode {
background: #121212 !important; color: #e0e0e0 !important;
}
body.dark-mode .content-outer, body.dark-mode .post, 
body.dark-mode .sidebar, body.dark-mode .header-outer {
background: #1e1e1e !important; color: #e0e0e0 !important;
}
body.dark-mode a {color: #4da6ff !important;}
body.dark-mode .post-title a {color: #ffffff !important;}
body.dark-mode input, body.dark-mode textarea {
background: #2a2a2a !important; color: #fff !important; border: 1px solid #444 !important;
}
body.dark-mode .popular-posts, body.dark-mode .Label {
background: #1e1e1e !important;
}
</style>

<button class="dark-toggle" onclick="toggleDark()">🌙 Dark</button>

<script>
//<![CDATA[
function toggleDark() {
document.body.classList.toggle('dark-mode');
if(document.body.classList.contains('dark-mode')){
localStorage.setItem('theme','dark');
document.querySelector('.dark-toggle').innerHTML = '☀️ Light';
} else {
localStorage.setItem('theme','light');
document.querySelector('.dark-toggle').innerHTML = '🌙 Dark';
}
}
// Load saved theme
if(localStorage.getItem('theme') === 'dark'){
document.body.classList.add('dark-mode');
document.querySelector('.dark-toggle').innerHTML = '☀️ Light';
}
//]]>
</script>

Step 3: Add Dark Mode Toggle to Header Menu

Fixed button can block content. Add to menu instead.

1. Layout → Add Gadget → HTML/JavaScript
2. Title: Leave blank
3. Content: Paste this code:

<button onclick="toggleDark()" style="background:#333;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;">
🌙 Dark Mode
</button>

4. Drag gadget to Header section → Save

Step 4: Fix Dark Mode Colors for Your Theme

Default code works for Contempo, Soho, Emporio. For custom themes, adjust colors.

Element	Light Mode	Dark Mode Fix
Background	#ffffff	#121212 or #1e1e1e
Text	#333	#e0e0e0 or #ffffff
Links	#1a73e8	#4da6ff or #8ab4f8
Code blocks	#f4f4f4	#2a2a2a with #e0e0e0 text

Step 5: Test Dark Mode + AdSense Compatibility

1. Test 1: Open blog → Click toggle → Page turns dark → Refresh → Stays dark
2. Test 2: Check all pages: Homepage, posts, static pages, mobile
3. Test 3: AdSense ads visible in dark mode? Text ads auto-adjust. Display ads stay same
4. Test 4: Images look good? Add body.dark-mode img {opacity: 0.9;} if too bright
5. Test 5: PageSpeed → Dark mode CSS must not cause CLS shift

Bad practice to avoid: Pure black #000000 background + pure white #ffffff text. Causes eye strain. Use #121212 bg + #e0e0e0 text.

Important: Auto dark mode based on user system: Add @media (prefers-color-scheme: dark) to CSS. But keep manual toggle for choice. Test with AdSense - some ad units look bad on dark bg. Move them to white containers.