Click here to Skip to main content
14,298,693 members
Rate this:
Please Sign up or sign in to vote.
See more:
Quote:
How can I fix the function to maintain the previous selection?


Quote:
I launched a blog with Dark Mode and Light Mode, but the problem is when dark mode is enabled and I go to next page, it returns to default version!

1. How can I fix the function to maintain the previous selection?
2. How can I change the SVG path for new mode?

I will use the pure svg path like this:


What I have tried:

<body id="darkoption" class="darkmode">
 <div>
  <a onclick="toggleDarkLight()">

   <svg class="sunmoon" width="30px" height="30px" viewBox="0 0 50 50">
     <g>
    <circle cx="25" cy="25" r="25"></circle>
     </g>
   </svg>

   <svg class="sunmoon" width="30px" height="30px" viewBox="0 0 50 50">
     <g>
    <rect x="0" y="0"></rect>
     </g>
   </svg>
   
  </a>
 </div>
 <h1>This is New Mode!</h1>
<script>
 function toggleDarkLight() {
 var e = document.getElementById("darkoption"),
  a = e.className;
 e.className = "darkmode" == a ? "lightmode" : "darkmode"
}
</script>
</body>
Posted
Updated 5-Sep-19 2:40am
Rate this:
Please Sign up or sign in to vote.

Solution 1

Quote:
How can I fix the function to maintain the previous selection?
Use localStorage to store the user selections and preferences for the website.

Window.localStorage - Web APIs | MDN[^]

Quote:
How can I change the SVG path for new mode?
You mean change the color based on the new preferences? In that case I would suggest have multiple SVG files and show either of them based on the configurations done by the users, in the localStorage profile. One hint would be:
function toggleDarkLight() {
   var e = document.getElementById("darkoption"),
   a = e.className;
   var mode = "darkmode" == a ? "lightmode" : "darkmode";
   e.className = mode;

   // store in the localStorage
   localStorage.setItem("sitemode", mode);
}
Then on the page reloads, you can set the modes through JavaScript,
function pageLoad() {
   var mode = localStorage.getItem("sitemode");
   if(mode) {
       // set the classnames, 
       var e = document.getElementById("darkoption"), a = e.className;
       e.className = mode;
   }
   // in else state, set it to default!
}
Then you can connect this function with the onload handler of the body element, like this,
<body onload="pageLoad();">
   <!-- Content here -->
</body>
This way you can capture the mode and always persist it using the HTML 5 APIs! Hope that helps.
   
Rate this:
Please Sign up or sign in to vote.

Solution 2

Thanks @afzaal_ahmad_zeeshan

But the problem is exist!

We have 3 modes!!!

I don't need to add 2 more modes on css as:

1.current mode (original css)
2.lightmode
3.darkmode

I just need use current mode and dark mode, that's it.

How can I point the lightmode to current mode -> (original css) and dark mode to darkmode?

Thanks again @afzaal_ahmad_zeeshan :)
   
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100