I have following code to set the dark mode for the document.body
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
.dark-mode {
background-color: black;
color: white;
}
<label class="switch">
<input onclick="myFunction()" type="checkbox">
<span class="slider round"></span>
</label>
If I set the document.body
to document.documentElement
it does not work. Does someone know how to fix it for the root element of the HTML? I also tried document.querySelector(":root");
.
So the code as you have it seem to be working fine, both document.body
and document.documentElement
, so the issue might be related on where and how you are importing de CSS.
With document.documentElement
<style>
.dark-mode {
background-color: black;
color: white;
}
</style>
<label for="toggle" class="switch">
Toggle
<input onclick="myFunction()" type="checkbox">
<span class="slider round"></span>
</label>
<script>
function myFunction() {
var element = document.documentElement;
element.classList.toggle("dark-mode");
}
</script>
With document.body
<style>
.dark-mode {
background-color: black;
color: white;
}
</style>
<label class="switch">
Toggle
<input onclick="myFunction()" type="checkbox">
<span class="slider round"></span>
</label>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
But also as a general recommendation de input shouldn't be wrapped in the label tag.
<style>
.dark-mode {
background-color: black;
color: white;
}
</style>
<label for="toggle" class="switch">
Toggle
</label>
<input id="toggle" name="toggle" onclick="myFunction()" type="checkbox">
<span class="slider round"></span>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>