How to Add Dark Mode Feature in Blogger (Step by Step Guide)

These days, many websites and apps are introducing Dark Mode—a sleek display option that replaces bright backgrounds with darker tones, making reading easier on the eyes, especially at night. If you are running a Blogger site, you might be wondering: can I add Dark Mode to my blog too? The answer is yes, and it’s easier than you think!

In this detailed Blogger Dark Mode tutorial, we’ll explore why Dark Mode is important, how to implement it step by step with CSS and JavaScript, and how to customize it to match your blog’s style. By the end, your readers will have the option to switch between Light Mode and Dark Mode—enhancing comfort and user experience.

What is Dark Mode?

Dark Mode is a display setting where the background is dark (usually black or gray) and the text is light (white or light gray). Instead of the traditional white background, users get a darker theme that reduces eye strain. It is now widely used in applications like YouTube, Twitter, Instagram, and many modern websites.

Why Add Dark Mode to Blogger?

Adding Dark Mode to your Blogger template has several advantages:

Better readability at night: Dark backgrounds reduce glare and make reading comfortable in low light.
Modern design: Dark Mode gives your blog a fresh, professional look that feels up to date.
User control: Readers can switch between Light Mode and Dark Mode based on their preference.
Unique branding: Not every Blogger site uses Dark Mode, so this sets your blog apart from competitors.
Battery saving (on OLED screens): Dark themes consume less power on smartphones with OLED displays.

How to Add Dark Mode in Blogger (Step by Step)

Let’s walk through the process of adding a Dark Mode switch in your Blogger template. This will include CSS for styling, HTML for the toggle button, and JavaScript to remember user preferences.

Step 1: Open Blogger Theme Editor

Step 2: Add Dark Mode CSS

Find the <b:skin> or <style> section in your template, and insert the following CSS code:

/* Dark Mode Toggle Styles */
.nightly {color:#999;font-size:13px}
.tombol {position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight {display:none;}
.togglenight + .togglenight-btn {
  outline:0;display:inline-block;width:45px;height:10px;position:relative;
  cursor:pointer;margin-left:5px;user-select:none;
}
.togglenight + .togglenight-btn:after,
.togglenight + .togglenight-btn:before {
  position:relative;display:block;content:"";width:50%;height:100%
}
.togglenight-switch + .togglenight-btn {
  background:#d5d2fc;border-radius:99em;transition:all .4s ease
}
.togglenight-switch + .togglenight-btn:after {
  content:'';border-radius:100px;background:#887fff;transition:left 0.3s ease;
  position:absolute;width:20px;height:20px;top:-5px;left:0;
  box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)
}
.togglenight-switch:checked + .togglenight-btn {background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after {
  content:'';left:55%;background:#ff9f43
}

/* Dark Mode Styling */
.nightmode {background:#202124;color:rgba(255,255,255,.7)}
.nightmode a {color:rgba(255,255,255,.7)!important}
.nightmode a:hover {color:rgba(255,255,255,.4)!important}

/* Example class */
.nightmode .contoh-class {}

Step 3: Add Dark Mode Toggle Button

Paste this HTML code where you want the switch to appear (usually inside <body>):

<div class='tombol'>
  <span class='nightly'>Dark Mode</span> 
  <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
  <label class='togglenight-btn' for='nightmode'></label>
</div>

Step 4: Add JavaScript for Toggle Function

Scroll to the bottom of your HTML, right before the closing </body> tag, and insert:

<script type='text/javascript'>
// Dark Mode Script with LocalStorage
$("#nightmode").click(function(){
  $("body").toggleClass("nightmode")
}),
$("body").toggleClass(localStorage.toggled),
$("#nightmode").click(function(){
  "nightmode"!=localStorage.toggled
  ? ($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode")
  : ($("body").toggleClass("nightmode",!1),localStorage.toggled="")
});
</script>

Step 5: Save Your Theme

Click Save and refresh your blog. You should now see a Dark Mode toggle button at the top-right corner.

How to Customize Dark Mode

You can customize which elements switch colors in Dark Mode. Simply prepend .nightmode before any class or ID in your CSS. For example:

.nightmode a {color:#fff}
.nightmode a:hover {color:blue}
.nightmode .post-title {color:#ff9f43}

You can also move the toggle button by editing its CSS:

.tombol {
  position:fixed;
  right:20px;
  top:20px;
  z-index:100;
}

Extra Tips for Bloggers

Experiment with color palettes. You don’t have to stick to pure black—try dark gray for better contrast.
Ensure good readability by testing different font colors against your dark background.
Combine Dark Mode with a custom scrollbar for a more stylish look.
Always test on both desktop and mobile views.

Troubleshooting Dark Mode in Blogger

If Dark Mode isn’t working as expected, check the following:

JavaScript conflicts: Make sure no other scripts override your body class.
LocalStorage not saving: Ensure your browser allows local storage.
Toggle not visible: Double-check the placement of your <div class='tombol'>.
Colors not changing: Verify that your CSS selectors are using .nightmode properly.

FAQ About Blogger Dark Mode

1. Can I use Dark Mode without JavaScript?

Yes, but the user preference (on/off) won’t be saved after refresh. JavaScript ensures the setting persists.

2. Will Dark Mode affect my SEO?

No, Dark Mode is purely a visual feature. However, better user experience can indirectly improve engagement, which helps SEO.

3. Can I use an icon instead of text for the toggle?

Yes, replace the text "Dark Mode" with an icon (e.g., a moon or sun) using Font Awesome or SVG.

4. Does it work on mobile Blogger themes?

Yes, as long as your theme supports custom HTML/CSS/JS, the Dark Mode will work across devices.

Conclusion

Adding Dark Mode in Blogger is a powerful way to modernize your site and improve user comfort. With just a few lines of CSS and JavaScript, you can give your readers the freedom to switch between light and dark themes whenever they like. Beyond looks, it shows that you care about their reading experience.

If you want to go further, combine Dark Mode with other customizations like a Blogger CSS scrollbar or personalized fonts for a unique design.

Now it’s your turn: try implementing this feature and give your blog a stylish, user-friendly Dark Mode!

Did this tutorial help you? Don’t forget to bookmark this article, share it with your fellow bloggers, and subscribe for more Blogger customization tutorials.

Comment Guidelines

Please keep your comments relevant to the topic (Blogger, SEO, coding, etc.).

Be respectful — no spam, offensive language, or personal attacks.

You may share suggestions, bug reports, or tutorial requests.

External links are allowed only if they are truly helpful and not for promotion.

Feedback will be reviewed, and I will try to reply as soon as possible.

By commenting here, you help improve KodeRian and keep the discussion useful for everyone.