0

I'm having trouble with prefers-color-scheme with the logic that I'm trying to achieve. For example, with the prefers-color-scheme I have a toggle on my site that overrides this is a user prefers black while using light mode, and vice versa. The issue I'm running into is I can't toggle it so that when a user changes the toggle to set it to the OS color theme, when they switch pages the theme switches back to the prefers color scheme. I already have local storage setup and variables called theme type and on.

When I comment out the detect color scheme function, the local storage remembers the users desired theme setting. When uncommented it overrides and always picks the theme os color scheme. How can I get my logic working right where when on the users first entry point before the local storage is created that it reads the theme OS but if the user changes the theme to black and vice versa that the OS doesn't override when on page change?

Thanks.

So the detectColorScheme checks users OS theme.

function detectColorScheme(){

var on = 1;
on = 1;

if (window.matchMedia('(prefers-color-scheme: dark)').matches && on <= 1) {
  if (on = 1 ) {
      on = 2;
      darkmode();
      console.log("OS Setting DARK MODE");
  }

}

 if (window.matchMedia("(prefers-color-scheme: light)").matches ) {
   if (on = 1) {
     lightmode();
     console.log("OS Setting LIGHT MODE");
   }
}

}

Then at the start of the javascript file I do the following : 

document.body.style.backgroundColor = "";

if (localStorage.themepref == 1 ) {
    detectColorScheme();
    document.body.style.backgroundColor = "#FFF";
    lightmode();
}
else {
    detectColorScheme();
    document.body.style.backgroundColor = "#0a0a0a";
    darkmode();
    localStorage.themepref = 2;
}


window.onload = function() {
  console.log('First');

  if (event.target.readyState === 'loading') {
    detectColorScheme();
    $('body').css({ background: ''});
    document.body.style.backgroundColor = "inherit";

   if(lightmodeON == true) {
     detectColorScheme();
     $('body').css({background: "#fbfcfd"});
     document.body.style.backgroundColor = "#FFF";
   }

   if(lightmodeON == false) {
     detectColorScheme();
     $('body').css({background: "#0a0a0a"});
     document.body.style.backgroundColor = "#0a0a0a";
   }
}
};

And lastly 

document.addEventListener("DOMContentLoaded", function() {

    window.scrollTo(0, 0);
    $(window).scrollTop( $("#top").offset().top );
    $(document).scrollTop(0);

  document.body.style.backgroundColor = "";

  if (document.readyState === 'complete') {


    if(lightmodeON == true) {
      $('body').css({background: "#fbfcfd"});
      console.log('loading white bg');
    }

    if(lightmodeON == false) {
      $('body').css({background: "#0a0a0a"});
      console.log('loading black bg');
    }
  }


  if (typeof (Storage) !=="undefined") {
    if (localStorage.themepref == 1 ) {
      lightmode();
    }
    else {
      darkmode();
      localStorage.themepref = 2;
    }

    if(lightmodeON == true) {
      $('body').css({background: "#fbfcfd"});
      console.log('loading fffwhite bg');
    }

    if(lightmodeON == false) {
      $('body').css({background: "#0a0a0a"});
      console.log('loading black bg');
    }
  }
Monstr92
  • 394
  • 8
  • 26
  • 1
    not enough code so that I can make sense of it, rather there is a small mistake in you code, in your function 'detectColorScheme', you are doing if(on=1), using single '=' instead of '=='. – Hamza Arshad Apr 30 '20 at 17:53
  • 1
    @HamzaArshad I edited the post with more code. Hopefully it provides insight and thanks for catching my error! – Monstr92 Apr 30 '20 at 20:26
  • Sir let me explain in simple words, what we are trying to achieve here, onloading the page, you want to check in localstorage and adjust the theme according to save preference. But later on user can toggle the theme and it must update the local storage too? right? – Hamza Arshad Apr 30 '20 at 20:33
  • Sort of yes. So if I disable the detectColorScheme() function the site will load black regardless of the OS setting. I want the site to detect OS setting first, but adjust localstorage if user chooses to change the theme because they prefer Black on White OS theme but save their preference and not have detect color scheme function always override user theme pref after first load of site (saving of local storage) – Monstr92 Apr 30 '20 at 20:39
  • did you got a chance to try my answer? Let me know if you have any questions. – Hamza Arshad May 01 '20 at 23:26
  • 1
    Tried to flag as a duplicate of https://stackoverflow.com/questions/56300132/how-to-over-ride-css-prefers-color-scheme-setting but can't due to bounty. – compuphys May 06 '20 at 21:01

1 Answers1

2

I have done this small effort, What I am doing is:

When user will load the website for first time, localStorage will be empty so we will setup the theme according to OS but then if user plays with our toggle, which if on then lightmode otherwise darkmode, then we will also save this in localstorage and next time when ever user will visit our page, we will check it's preference from the local storage, will never go back to OS theme.

Please have a look and let me know if it is any helpful. It will not work here as localStorage will not be supported here. Please copy and test in your browser.

<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
 <label style="color:yellow;">IsLightMode: </label>
 <input id="toggleCheck" type="checkBox" onclick="toggle()" />
 <script>
  var lightmodeOn = true;
  function changeColorOfBackground(lightmodeOn) {
   if(lightmodeOn == true) {
     // you can call your lightmode function here if want to set other things too.
     $('body').css({background: "#fbfcfd"});
     console.log('loading white bg');
   }

   if(lightmodeOn == false) {
     // you can call your darkmode function here if want to set other things too.
     $('body').css({background: "#0a0a0a"});
     console.log('loading black bg');
   }
  }
  function toggle() {
   lightmodeOn = !lightmodeOn;
   changeColorOfBackground(lightmodeOn);
   localStorage.themepref = lightmodeOn?1:2;
  }
  
  document.addEventListener("DOMContentLoaded", function() {
   
         //if it is not set in localStorage only then check OS theme otherwise always load from localStorage
   if(localStorage.themepref === null) {
    //if windows is light, then we should go with dark theme
    if (window.matchMedia('(prefers-color-scheme: light)').matches) {
     lightmodeOn = false;
    }
   }
   else if (localStorage.themepref == 2 ) {
    lightmodeOn = false;
   }
   
   if(lightmodeOn) {
    $('#toggleCheck').prop('checked',true);
   }
   
   changeColorOfBackground(lightmodeOn);
  });
 </script>
</body>
</html>
Hamza Arshad
  • 856
  • 5
  • 8