How to add Dark/Light Mode Switcher

How to add Dark Mode Switcher

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to add Dark Mode Switcher

Benefits :-

  1. Responsive quick Dark/Light Mode Switcher
  2. Make your Site Easier to see for eyes
Let's Start

How to add Dark Mode Switcher :-

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.
Step 5 :- Copy the provided below code and paste it just before ]]></b:skin>.

  .sw{flex:0 0 36px; display:flex;align-items:center;position:relative;height:22px;padding:3px 4px;border-radius:25px; background-color:rgb(229 227 226); font-style:normal}
  .sw::before{content:''; display:block;position:relative; width:16px;height:16px;border-radius:50%; background-color:#fffdfc;box-shadow:5px 5px 15px 0 rgb(0 0 0 / 8%); transition:transform var(--transDuration)}
  .dark .sw {background:#2d2d30;color:#fefefe}
  .dark .sw::before {transform: translateX(12px)}
  .dark .swd{display:none!important}
  .light .swl{display:none!important}
Step 6 :- Replace all the blue background marked parts according to your theme.

Step 7 :- Add this Html code wherever you want to use it

<div class='dSw'>
  <span onclick='switchD()' class='sw swd' role='button'></span>
Step 8 :- Copy the provided below code and paste it just before </body>.
  function switchD() {
    localStorage.setItem("thM", "dark"),
      document.querySelector(".sw").setAttribute("onclick", "switchL()"),
      document.querySelector(".sw").setAttribute("class", "sw swl")
  function switchL() {
    localStorage.setItem("thM", "light"),
      document.querySelector(".sw").setAttribute("onclick", "switchD()"),
      document.querySelector(".sw").setAttribute("class", "sw swd")
Step 8 :- Create New Style Block

Step 9 :- Let's Give Example we have an element with the class element

Step 10 :- To add dark look to it in the dark mode Add Before each Selector Look Below If you didn't Understand

  // Below is the look of the css light look selector In Usual
  <style>/*<![CDATA[*/.element{some light styling}/*]]>*/</style>
  // Below is how to add dark style selector
  <style>/*<![CDATA[*/.dark .element{some dark styling}/*]]>*/</style>


In this post, I have talked about How to add Dark Mode Switcher. Tell us What You Say About The Post by Making a Comment and if you have any questions Contact Us at the Contact Us page. Hope You Enjoy In Our Website.


Our Posts Are Protected By Don't Copy Our Post. Wolv Themes All Rights Reversed.

Rate this article

Frontend Developer and UX Designer

Post a Comment