How to add dark mode button in blogger blog theme ?

Dark mode has become increasingly popular in recent years, and for good reason. It provides a more comfortable reading experience in low-light conditions, reduces eye strain, and can even save battery life on certain devices. If you run a blog on Blogger, you may want to consider adding a dark mode option for your readers. In this tutorial, we will show you how to add a dark mode switching button in Blogger in just a few simple steps.

Step 1: Choose a Theme that Supports Dark Mode

Before you can add a dark mode switching button, you need to make sure your blog's theme supports dark mode. There are a few ways to do this:Choose a Blogger theme that already supports dark mode. Some of the newer themes have a built-in dark mode option, so you can simply activate it and you're done.
Modify your current theme to include a dark mode option. If your current theme doesn't support dark mode, you can modify it by adding custom CSS code to switch between light and dark modes. We'll cover this in more detail in Step 2.

Step 2: Add Custom CSS to Switch Between Light and Dark Modes

If your theme doesn't support dark mode, you can add custom CSS code to switch between light and dark modes. Here's how:

Log in to your Blogger account and go to the "Theme" section of your blog's dashboard.


Click on the "Customize" button to access the Theme Designer.


Click on "Advanced" in the left-hand menu and scroll down to the "Add CSS" section.


In the "Add CSS" section, copy and paste the following CSS code:

/* Light mode */
body {
  background-color: #ffffff;
  color: #000000;
}

a {
  color: #000000;
}

/* Dark mode */
.dark-mode body {
  background-color: #222222;
  color: #f1f1f1;
}

.dark-mode a {
  color: #f1f1f1;
}

Click "Apply to Blog" to save the changes.

This code sets the background color to white (#ffffff) and the text color to black (#000000) for light mode. For dark mode, it sets the background color to a dark gray (#222222) and the text color to white (#f1f1f1). Note that we're using the .dark-mode class to target elements that should be styled differently in dark mode.

Step 3: Add a Dark Mode Switching Button

Now that you have a way to switch between light and dark modes, you need to provide your readers with a way to activate it. You can do this by adding a dark mode switching button to your blog. Here's how:

• 
  

• Go to https://www.w3schools.com/howto/howto_css_switch.asp and copy the HTML and CSS code for a switch button.

• Log in to your Blogger account and go to the "Layout" section of your blog's dashboard.

• Click on "Add a Gadget" and choose the "HTML/JavaScript" gadget.

• Paste the HTML and CSS code for the switch button into the gadget.

• Modify the code to include the following JavaScript code:

var checkbox = document.querySelector('input[name=mode]');
checkbox.addEventListener('change', function() {
  if(this.checked) {
    document.documentElement.setAttribute('data-theme', 'dark');
    document.querySelector('.dark-mode').classList.add('dark-mode');
  } else {
    document.documentElement.setAttribute('data-theme', 'light');
    document.querySelector('.dark-mode').classList.remove('dark-mode

Click "Save" to add the gadget to your blog. This code listens for changes to the switch button and updates the data-theme attribute of the html element to either "light" or "dark" depending on the switch state. It also adds or removes the .dark-mode class to the body element to apply the appropriate styles.

Step 4: Customize the Dark Mode Styles

Now that you have a dark mode switching button, you can customize the dark mode styles to fit your blog's design. Here are a few things you can do:

• Change the background color to a different shade of gray or black.

• Change the text color to a different shade of white or off-white.

• Change the link color to a different shade of white or off-white.

• Change the heading font color to a different shade of white or off-white.

You can experiment with different colors and fonts until you find a dark mode design that fits your blog's style.

Step 5: Test Your Dark Mode

Before you publish your dark mode switch, it's important to test it thoroughly. Make sure that all elements of your blog are visible and legible in both light and dark mode. Check that all images, videos, and other media display correctly. Also, make sure that the switch button works as intended and that the styles change appropriately.

Conclusion

Adding a dark mode switching button to your Blogger blog is a great way to provide your readers with a more comfortable reading experience, especially in low-light conditions. By following the steps outlined in this tutorial, you can easily add a dark mode switch to your blog and customize the dark mode styles to fit your design. Make sure to test your dark mode thoroughly before publishing it to ensure a seamless user experience for all of your readers.

We hope that this tutorial has been helpful in showing you how to add a dark mode switching button to your Blogger blog. By providing a dark mode option for your readers, you can improve the accessibility and user experience of your blog.

Remember, you can always modify the CSS code and switch button design to fit your blog's unique style and branding. You can also consider using a plugin or widget for dark mode switching if you don't want to use custom CSS code.

Additionally, it's important to keep in mind that not all users may want to use dark mode. Some readers may prefer the default light mode, so it's always a good idea to provide both options and let users choose which mode they prefer.

In conclusion, adding a dark mode switch to your Blogger blog can improve the user experience for your readers and make your blog more accessible. We encourage you to try out the steps outlined in this tutorial and see the positive impact it can have on your blog.

Go to Link