Adding a Dark Mode toggle to your Blogger site is one of the best ways to improve user experience and modernise your blog's design. This guide uses CSS Variables and JavaScript to ensure the dark mode is responsive and remembers the user's preference even after they refresh the page.

Step 1: Define CSS Variables for Light and Dark Themes

To make switching themes easy, you must first define your colors using CSS variables. Go to your Blogger Dashboard, select Theme, click the dropdown next to 'Customize', and choose Edit HTML. Search for <b:skin> and add the following code right after it:

:root { --bg-color: #ffffff; --text-color: #333333; }
[data-theme='dark'] { --bg-color: #18191a; --text-color: #f5f6f7; }

Apply these variables to your body tag in your CSS: body { background-color: var(--bg-color); color: var(--text-color); transition: 0.3s; }

Step 2: Add the Dark Mode Toggle Button

Next, you need to place a button where users can click to switch modes. Usually, this is placed in the navigation bar. Find the <nav> or header section in your HTML and paste this HTML code:

<button id='dark-mode-toggle' aria-label='Toggle Dark Mode'>🌙 Toggle Mode</button>

Step 3: Implementation via JavaScript for Beginners

Now, we need to make the button functional using JavaScript. This script will check if the user has a saved preference in their browser's localStorage. Scroll down to the bottom of your Blogger XML code and paste this right before the </body> tag:

<script> const toggleBtn = document.getElementById('dark-mode-toggle'); const currentTheme = localStorage.getItem('theme'); if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); } toggleBtn.addEventListener('click', () => { let theme = document.documentElement.getAttribute('data-theme'); if (theme === 'dark') { theme = 'light'; } else { theme = 'dark'; } document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('theme', theme); }); </script>

Step 4: Style the Toggle Button with CSS

To make the button look professional, add some CSS styling. Go back to your <style> section and add:

#dark-mode-toggle { padding: 10px; cursor: pointer; border: none; border-radius: 5px; background: #eee; color: #333; font-weight: bold; }

Step 5: Save and Test Your Template

Click the Save icon (floppy disk) in the Blogger editor. View your blog and click the button. You should see the background and text colors change instantly. Because we used localStorage, the dark mode will stay active even if the visitor navigates to different pages on your blog.

💡 Pro Tip: Keep your software updated to avoid these issues in the future.