Search code examples
javascriptthemestoggle

How change themes in JS without Jquery?

enter image description here

want to add another theme for my project. have 2 : light and dark . now i want to add another theme:navy and i sholdnt use Jquery .

Solution

  • I would argue if toggle is the right word here - you usually toggle between two values. I supposed you want to iterate through values in a way - 0,1,2,0,1,2,...

    or, let say you have classes light, gray, dark, light, gray, dark

    you can do so with the following:

    const root = document.querySelector('html')
const menu = document.querySelector('.menu')

const classArray = ['light', 'dark', 'navy']
let classIterator = 0

menu.addEventListener('click', () => {
    root.classList.remove(classArray[classIterator % classArray.length])
    classIterator++
    root.classList.add(classArray[classIterator % classArray.length])
})

    You have an array of classes (classArray) in which you have a set of values you want to iterate through - light, gray and dark.

    On click, you want to remove the current class:

    root.classList.remove(classArray[classIterator % classArray.length])

    increase the counter:

    classIterator++

    and add the next class:

    root.classList.add(classArray[classIterator % classArray.length])

    The reason why you access the array element with:

    classArray[classIterator % classArray.length] instead of classArray[classIterator] is because you don't want to get out of the bounds of the array, so you always iterate through 0 - 1 - 2, because mod operator gets you the remainder of the division.