0

Is there any javascript function which can change all the given CSS styles to other CSS styles in the following code. See, I want body, .container1, .button1, and all other things in the given link to turn into body.dark, container1.dark etc.

https://codepen.io/vkdatta27/pen/poyYapw

4 Answers4

2

Why not adapt your css so that you only change one? Keep it clean.

function toggleDark() {
  const body = document.querySelector('body');
  if (body.classList.contains('dark')) {
    body.classList.remove('dark');
  } else {
    body.classList.add('dark');
  }
}

document.querySelector('#darkmode').addEventListener('click', toggleDark);
body {
  background-color: #c0c0c0;
}

body.dark {
  background-color: #272727;
}

.container1 {
  width: fit;
  background-color: lightblue;
  height: fit;
  color: green;
}

body.dark .container1 {
  width: fit;
  background-color: yellow;
  height: fit;
  color: red;
}

.container2 {
  width: fit;
  background-color: black;
  height: fit;
  color: white;
}

body.dark .container2 {
  width: fit;
  background-color: white;
  height: fit;
  color: black;
}

.button1 {
  background-color: #c0c0c0;
  color: black;
  border-radius: 25px;
  border: 1px solid black
}

body.dark .button1 {
  background-color: #white;
  color: black;
  border-radius: 25px;
  border: 1px solid black
}
<div class="container1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br />
<div class="container2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br />
<button id="darkmode" class="button1"> Lights Off!!</button>
jcpaiva
  • 422
  • 1
  • 6
  • 14
  • Only sensible and scalable solution. Some want to add the class to every element in the page which is insane – charlietfl Sep 26 '20 at 12:42
0

Select the button and listen for the click event. Whenever you click on a button you'll want to call a function which loops over the elements that you've specified and uses classList.toggle('dark') to either add or remove the .dark class to these elements.

const button = document.querySelector('#darkmode');
const elements = document.querySelectorAll('body, .container1, .button1');

button.addEventListener('click', () => {
  for (const element of elements) {
    element.classList.toggle('dark');
  }
});

But it might be way easier to use the power of CSS. Like so:

.container1 {
  background-color: lightblue;
}

.dark .container1 {
  background-color: yellow;
}

Now you'll only have to add or remove the dark class on an element that is a parent of all your elements, like body, to set the dark mode on or off.

const button = document.querySelector('#darkmode');

button.addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

Oh and small sidenote: fit is not a valid value for the width property. Check MDN for valid values.

Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32
0

firstly give same class to all css items such as thema

in js declare one attribute for thema

dark=false;
themas=document.querySelectorAll(".thema");
function Change(){
  dark= dark ? false:true;
    themas.forEach(element=>{
      if(dark){
         element.classList.add("dark");
      }
      else{
        element.classList.remove("dark");
      }
    })
   
  
}
body{
  background-color: #c0c0c0;
  }
body.dark{
  background-color: #272727;
  }
.container1 {
 width: fit;
 background-color: lightblue;
 height: fit;
 color: green; 
 }
.container1.dark{
 width: fit;
 background-color: yellow;
 height: fit;
 color: red; 
 }
.container2 {
 width: fit;
 background-color: black;
 height: fit;
 color: white; 
 }
.container2.dark{
 width: fit;
 background-color: white;
 height: fit;
 color: black; 
 } 
.button1 {
  background-color: #c0c0c0;
  color: black;
  border-radius: 25px;
  border: 1px solid black
    }
.button1.dark{
  background-color: #white;
  color: black;
  border-radius: 25px;
  border: 1px solid black
    }
<div class="thema container1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br />
<div class="thema container2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><br />
<button id="darkmode" onclick="Change()" class="thema button1"> Lights Off!!</button>
Ahmet Ali Kaya
  • 11
  • 3
0

You can get all div elements using document.querySelectorAll("div"), then iterate on all elements using forEach and changing its class name.

var el = document.querySelectorAll("div")
function enableDarkMode(){
  el.forEach((a)=>{
    const className = a.className
    a.className=toggleDark(className)
  })
}

function toggleDark(className){
  if(className.endsWith("dark")){
    return className.substring(0, className.length-5)
  }else{
    return className+".dark";
  }
}
Raz
  • 1