Home
blogger
how to

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
Demo

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>.

<style>/*<![CDATA[*/
  .dSw{display:flex;align-items:center;justify-content:space-between;line-height:normal}
  .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}
  /*]]>*/</style>
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>
</div>
Step 8 :- Copy the provided below code and paste it just before </body>.
<script>//<![CDATA[
  function switchD() {
    localStorage.setItem("thM", "dark"),
      document.body.classList.add("dark"),
      document.body.classList.remove("light"),
      document.querySelector(".sw").setAttribute("onclick", "switchL()"),
      document.querySelector(".sw").setAttribute("class", "sw swl")
}
  function switchL() {
    localStorage.setItem("thM", "light"),
      document.body.classList.remove("dark"),
      document.body.classList.add("light"),
      document.querySelector(".sw").setAttribute("onclick", "switchD()"),
      document.querySelector(".sw").setAttribute("class", "sw swd")
  };
  "dark"===localStorage.getItem("thM")&&(document.body.classList.add("dark"),document.body.classList.remove("light")),"light"===localStorage.getItem("thM")&&(document.body.classList.remove("dark"),document.body.classList.add("light"));
//]]></script>
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>

Conclusion

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.

Refrence:
https://www.wolvthemes.xyz/2022/06/how-to-add-dark-mode-switcher.html

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

Post a Comment