How to create a jQuery function to toggle dark mode?

user_7887014 0
Viewed 8562

I'm designing a dark mode for my website. Given I have a lot of written content, that would be especially helpful for evening reading. I have a toggle and have borrowed a function that seems to work so far:

$(function() {
  $(".switch").click(function() {
    $("#canvas-wrapper").css("background", "#222");
    $("p").css("color", "#DDD");
    });
});

I want the user to toggle these changes on and off as desired. However, when I attempt to add another line - defining a css change for another element - the function only applies the style to the first #canvas-wrapper element. Everything thereafter is ignored.

Is my syntax incorrect later in the function? Also, I need to write the function in a way that returns the CSS to its original state, should the user deactivate the toggle. How would I approach this?

I'm quite poor with jQuery and haven't had a ton of experience with the language.

css jquery javascript
4 Answers

Instead of changing every single element, you can define the dark mode styles in your CSS, and just use jQuery to toggle the dark-mode class.

I'm assuming clicking the .switch twice would change it back to light mode, and that your current CSS shows the light mode styles by default.

CSS:

#canvas-wrapper.dark-mode {
  background: #222;
  color: #DDD;
}

jQuery:

$(function() {
  $(".switch").click(function() {
    $("#canvas-wrapper").toggleClass("dark-mode");
  });
});

If you like, you can use CSS variables as well. However, it would still involve class toggling/changing somewhere in your code. Using CSS variables but using vanilla JS: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

user_116202210

you may have to write some css for each element whether its in light or dark mode. use javascript to toggle between the two. You can have a class for light mode (.light-mode) then one for dark mode. as long as class-wrapper is a div you should be ok.

I would use a js variable with global access for the mode and tie that into a function.

css 

.light-mode{


    some more css classes for light mode

}

.dark-mode{


    some more css classes for dark mode

}
user_45902150

You need to use css with a target class. Jquery toggleClass() will do the job

.bgDark{background: #4a4a4a !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="myDiv" class="" style="background: #fff393; border: 1px solid black;  width: 100px; height: 100px"></div>

<button onclick="$('#myDiv').toggleClass('bgDark')">toggle bg</button>

user_31547820

You can resolve this issue by doing some tricks, direct answer for your question is by implement toggleClass for dark/light theme.

for example you look to this demo

<div class="change-color">
  <p>Hello World</p>
</div>

<div class="change-color">
  <p>Hello World 2</p>
</div>

<button>Change color</button>

and our script:

// find elements
var anotherColor = $(".change-color")
var button = $("button")

// handle click and add class
button.on("click", function(){
  anotherColor.toggleClass("another-color")
})

and our style:

body {
  background: #000;
  color: red;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.another-color {
  background: #ddd;
}

But you can resolve issue too by using root variable color, for example:

:root {
  --color-bg: #000;
}

.default-color {
  background-color: var(--color-bg);
}

.another-color {
  --color-bg: #ddd;
}

You can look to this demo too

user_32881230
Related