Checkbox JavaScript doesn't change Stylesheet

Question

I'm trying to make a website which can switch to dark mode when user wants to. I made 2 stylesheets 1. style.css and 2. darkstyle.css

To make switching possible, I took the code from:JS fiddle and DevelopPHP and merged them accordingly to make the following code:

HTML:

<head>
<title>Home</title>
<link id="pagestyle" rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="changeCSS.js"></script>
</head>

<body>
<label for="mode"><input id="mode" type="checkbox"> Dark Mode</label>
...
</body>

The JavaScript is

$('#mode').change(function(){   
if ($(this).prop('checked'))
{
    document.getElementById('pagestyle').setAttribute('href', "darkstyle.css");
}
else
{
    document.getElementById('pagestyle').setAttribute('href', "style.css");
}

});

The code above doesn't work.

PS: I searched a lot about this and found a stackoverflow answer but I can't integrate this answer with a checkbox.

Was it able to change CSS stylesheets? – Breakpoint Jul 31 '18 at 18:29 — Breakpoint, Jul 31 '18 at 18:29

aaplmath · Accepted Answer · 2018-07-31T22:16:03.327

It looks like your issue might have to do with the location where you're loading your JavaScript files. In general, it's good practice to put your script tags at the end of your body; here, this is especially important, as you're binding a listener to a DOM object that, when your script is executed, hasn't yet been created. Moreover, it appears that you haven't even loaded the jQuery script at the time your script is executed; without jQuery, your script will fail to run. Try moving your script tag to the end of the body, and make sure that you've loaded jQuery before your changeCSS.js file.

Here's a working demo of your code with the script tags properly placed.

Note, however, that even with this working implementation of your code, there is a significant delay between when the checkbox is clicked and when the style change takes effect. This is an inherent drawback of the approach you're taking (i.e., loading an entirely new CSS file); a more performant approach might be to create a class (e.g., dark) that is added to or removed from the body when the checkbox is clicked. In your one CSS file, you could then create two sets of rules: one for elements in the regular, "light" state, and one for elements with the .dark class. An example might look like:

/* The :not(.dark) is not strictly necessary and is simply added for verbosity */
body:not(.dark) {
  background-color: white;
} 
body:not(.dark) h1 {
  color: black;
}

body.dark {
  background-color: black;
}
body.dark h1 {
  color: white
}

With the following JavaScript:

$('#mode').change(function () {   
  if ($(this).prop('checked')) {
      $(document.body).addClass('dark')
  } else {
      $(document.body).removeClass('dark')
  }
})

Comment out line 13 and uncomment line 15 of index.html in the REPL linked above to see a demonstration of this code.

It works perfectly. Thanks. I'll try the other solution also. — Breakpoint, Jul 31 '18 at 19:04
I have one more problem. After I reload the page, it automatically switches back to light them. In Mozilla the checkbox stays checked but theme is light. Any suggestions? Same code as the question (just added JQuery script and changed position of JavaScript tag) — Breakpoint, Jul 31 '18 at 19:29
I would use `localStorage` (which you can read more about on the [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)) to persist the user's selection. I've updated both scripts on the REPL to save and load values from localStorage—I think they're pretty self-explanatory. — aaplmath, Jul 31 '18 at 19:56
It worked. I'm indebted. I'm just wondering why doesn't it work on Microsoft edge but MDN says that it (Edge) supports `localStorage` . I think maybe it is incompatible with the JQuery version we're using? — Breakpoint, Jul 31 '18 at 20:23
The issue with Microsoft Edge seems to be that it doesn't support `localStorage` from local files (i.e., those accessed from a `file://` URL). There's an open [issue](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8816771/) on Microsoft's developer site. — aaplmath, Jul 31 '18 at 20:26

Checkbox JavaScript doesn't change Stylesheet

1 Answers1