Can I change the value of a CSS property in JavaScript?

Question

I need color themes for my website. So what I intended on doing was making a class in CSS,

#box {
    width: 500px;
    height: 300px;
}
.color1 {
    background-color: rgb(105, 105, 105);
}

Applying it to my HTML div element,

<div class="color1" id="box">
    <button id="darkModeButton">Dark Mode</button>
</div>

<div class="color1">
</div>

<div class="color1">
</div>

And then when the button is clicked change the color of all the elements with the class color1,

var darkModeButton = document.querySelector("#darkModeButton");

darkModeButton.onclick = function() {
    //something like this:
    color1.backgroundColor = "rgb(55, 55, 55)";
    //but obiviously this doesn't work so how can i fix this
}

Answer 1

Just toggle a class on the body and use different CSS rules.

var darkModeButton = document.querySelector("#darkModeButton");

darkModeButton.addEventListener("click", function() {
   document.body.classList.toggle("darkmode");
});

#box {
    width: 500px;
    height: 300px;
}
.color1 {
    background-color: rgb(105, 105, 105);
}

.darkmode .color1 {
  background-color: black;
}

<div class="color1" id="box">
    <button id="darkModeButton">Dark Mode</button>
</div>

<div class="color1">
</div>

<div class="color1">
</div>

Answer 2

You can use CSS variables to change them programatically in JS. Do consider epascarello's comment. Toggling classes is also a good solution.

Your CSS:

:root {
  --backgroundColor: rgb(105, 105, 105);
}

#box {
    width: 500px;
    height: 300px;
}
.color1 {
    background-color: var(--backgroundColor);
}

This is the JS:

var darkModeButton = document.querySelector("#darkModeButton");

darkModeButton.onclick = function() {
    //something like this:
    document.documentElement.style.setProperty('--backgroundColor',"rgb(55, 55, 55)");;
    //but obiviously this doesn't work so how can i fix this
}

Answer 3

You could try using a CSS variable:

:root {
    --bg-color: rgb(105, 105, 105);
}

And then change it using JS:

var r = document.querySelector(':root');
r.style.setProperty('--bg-color', 'rgb(55, 55, 55)');

Changing CSS Variable with JS

Answer 4

<div class="color1" id="box">
    <button id="darkModeButton">Dark Mode</button>
</div>

<div class="color1">
  test <!-- will be able to see background color if we have some content -->
</div>

<div class="color1">
  test
</div>




var darkModeButton = document.querySelector("#darkModeButton");

darkModeButton.onclick = function() {
  // USE: If only For First Element
  // let color1 = document.querySelector('.color1'); 
  // color1.style.backgroundColor = "rgb(55, 55, 55)";
  
  // USE: For all element which has class name as '.color1'
  let color1 = document.querySelectorAll('.color1'); 
  color1.forEach((element) => {
    element.style.backgroundColor = "rgb(55, 55, 55)";
  });
}

Answer 5

You can take a look at CSS variables, you can create a set of colors that is the light theme and add them to the :root rule, and then create another attribute for dark theme colors.

On the button click, you can toggle the class and attribute as shown below,

const toggleBtn = document.querySelector('#darkModeButton');


function switchTheme(e) {
  if (darkModeButton.classList.contains('light')) {
    document.documentElement.setAttribute('data-theme', 'dark');
    darkModeButton.classList.remove('light');
    darkModeButton.classList.add('dark');
  } else {
    document.documentElement.setAttribute('data-theme', 'light');
    darkModeButton.classList.remove('dark');
    darkModeButton.classList.add('light');
  }
}

darkModeButton.addEventListener('click', switchTheme, false);

:root {
  --primary-color: #302AE6;
  --secondary-color: #536390;
  --font-color: #424242;
  --bg-color: #fff;
  --heading-color: #292922;
}

[data-theme="dark"] {
  --primary-color: #9A97F3;
  --secondary-color: #818cab;
  --font-color: #e1e1ff;
  --bg-color: #161625;
  --heading-color: #818cab;
}

body {
  font-family: sans-serif;
  background-color: var(--bg-color);
  color: var(--font-color);
  max-width: 90%;
  margin: 0 auto;
  font-size: 18px;
}

#darkModeButton {
  margin: 20px 0;
}

<div class="color1" id="box">
  <button id="darkModeButton" class="light">Dark Mode</button>
</div>

<div class="color1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nulla quis velit porta ullamcorper ac non justo. Phasellus efficitur ac diam non placerat. Ut a lobortis nibh. Vestibulum finibus elit at enim molestie mollis. Etiam tempor velit eros,
  eget elementum diam bibendum dignissim. Integer nec augue mattis, interdum erat quis, tincidunt nunc. Maecenas a suscipit enim, nec faucibus turpis. Donec semper, orci ac auctor scelerisque, nunc mi hendrerit dolor, eget feugiat lacus odio vitae ipsum.
  Cras augue quam, vehicula eu vestibulum in, maximus vitae neque. Vivamus dapibus odio magna, ut ullamcorper diam posuere sit amet. Maecenas accumsan sapien vitae leo pulvinar, in venenatis metus facilisis. Cras dapibus quam sit amet nisi tempus vestibulum.
  Nunc tincidunt, metus at ultricies vehicula, nibh nisl semper enim, id venenatis odio ante eleifend mauris. Fusce suscipit, erat ut mattis iaculis, nulla neque consectetur quam, nec fringilla leo orci eu lectus. Vestibulum ante ipsum primis in faucibus
  orci luctus et ultrices posuere cubilia curae;
</div>

Answer 6

You can create a function and set a conditional that adds/removes classes that change the contents CSS. Then in your click eventListener for the button, run the function.

var darkModeButton = document.querySelector("#darkModeButton");
const box = document.getElementById('box')

function setMode() {
  if (box.classList.contains('regularMode')) {
    box.classList.remove('regularMode')
    box.classList.add('darkMode')
    darkModeButton.textContent = 'Regular Mode'
  } else {
    box.classList.remove('darkMode')
    box.classList.add('regularMode')
    darkModeButton.textContent = 'Dark Mode'
  }
}


darkModeButton.addEventListener('click', setMode)

#box {
  width: 500px;
  height: 300px;
}

.regularMode {
  color: black;
  background: white;
}

.darkMode {
  color: white;
  background: black;
}

<div class="regularMode" id="box">
  <button id="darkModeButton">Dark Mode</button>

  <div class="content">Some content
  </div>

  <div class="content">Somemore content
  </div>
</div>