DEV Community


Discussion on: Let's create a custom toggle switch using HTML and CSS.

shtep profile image
jim shtepa

I am wondering if you could suggest basic integration to, for example, switching themes? What would be the best approach?

devggaurav profile image
Gaurav Author • Edited

Yes, we can use this toggle to switch themes using javascript. We will have to add an event listener on the checkbox to listen for the 'change' event and create a function that toggles the theme on the body. First, you have to define your dark-mode class in your CSS and the javascript will look something like this,

const checkBox = document.getElementsByClassName("checkbox");
const body = document.body;

checkbox.addEventListener("change", darkMode);

function darkMode() {

Enter fullscreen mode Exit fullscreen mode