Switch several colors with a button click-CodePudding

Hello I have an organised list of class names with a particular color code on each one. bgColor1, bgColor2, txtColor1, txtColor2, etc. What I want to do is to switch two shades of white and two shades of black for the background and the text respectively with a single toggle of a button. The idea is that I'll give a single div the classes for the text and the background with their respective names. And whenever I click the toggle button I want to switch between 3 and 5 and 4 and 6 colors.

For example if I pick bgColor3 for the background and txtColor5 for the text. with the toggle it should change to bgColor5 and txtColor3 that way the light background will change to the dark one and the light text will switch to dark.

Kind of nailed it but still not working properly and not sure how to fix this...

Here are my css color codes

function toggleDarkMode() {
    let bgColor3 = document.getElementsByClassName('bgColor3');
        for(let index = 0 ; index < bgColor3.length ;   index)
            bgColor3[index].classList.toggle('bgColor5');
    let txtColor5 = document.getElementsByClassName('txtColor5');
        for(let index = 0 ; index < txtColor5.length ;   index)
            txtColor5[index].classList.toggle('txtColor3');
}

/* MAIN LIGHT */
.txtColor3 {
    color: #FFF7F1;
}

.bgColor3 {
    background-color: #FFF7F1;
}
/* SECONDARY LIGHT */
.txtColor4 {
    color: #FBF3EC;
}

.bgColor4 {
    background-color: #FBF3EC;
}
/* MAIN DARK */
.txtColor5 {
    color: #022326;
}

.bgColor5 {
    background-color: #022326;
}
/* SECONDARY DARK */
.txtColor6 {
    color: #01181C;
}

.bgColor6 {
    background-color: #01181C;
}

<button onclick="toggleDarkMode()">Toggle dark mode</button>
    <div >test</div>

CodePudding user response：

I would strongly consider a css redesign so that you can achieve a full dark mode by toggling one class at the root level.

For example, here I am able to toggle a dark mode simply by adding a dark-mode class to the body.

document.querySelector('button').addEventListener('click', function() {
  document.body.classList.toggle('dark-mode');
});

.card {
  background: yellow;
  color: blue;
}

h1 {
  padding: 0;
  margin: 0;
}

.dark-mode .card {
  background: #555;
  color: white;
}

.dark-mode {
  background: #111;
}

.dark-mode h1 {
  color: yellow;
  background: #777;
}

<body>
  <h1>My Page</h1>
  <p class='card'>Test 123 <button>toggle dark mode</button></p>

</body>

CodePudding user response：

I would give your div an id and use vanilla JS hasClass.
That way you can now use a conditional where you check which class you have ON in the specific div you are working on and then just change that class to the one you need depending on the result of the conditional.
Hope this helps you.