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.

code is working fine for me.

Ashu
– Ashu

2018-07-31 18:27:30 +00:00
Commented Jul 31, 2018 at 18:27 — Ashu
– Ashu, Commented Jul 31, 2018 at 18:27
Was it able to change CSS stylesheets?

Breakpoint
– Breakpoint

2018-07-31 18:29:02 +00:00
Commented Jul 31, 2018 at 18:29 — Breakpoint
– Breakpoint, Commented Jul 31, 2018 at 18:29

aaplmath · Accepted Answer · 2018-07-31 22:16:03Z

2

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.

edited Jul 31, 2018 at 22:16

answered Jul 31, 2018 at 18:55

aaplmath

1,7751 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Breakpoint Over a year ago

It works perfectly. Thanks. I'll try the other solution also.

Breakpoint Over a year ago

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)

aaplmath Over a year ago

I would use localStorage (which you can read more about on the MDN web docs) 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.

Breakpoint Over a year ago

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?

aaplmath Over a year ago

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 on Microsoft's developer site.

Collectives™ on Stack Overflow

Checkbox JavaScript doesn't change Stylesheet

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related