how to create a "light and dark" functioning button using JS?

Question

I'm currently trying to do it by changing my :root variables for the color scheme of the page with a function changeBackgrondColor() and assigning to my fontAwesome moon "button". However, when i click at the moon, the page changes all of the colors for a sec and then comeback to the original form.

var r = document.querySelector(':root');
var rootStyles = getComputedStyle(r);
function changeBackgroundColor(){
    r.style.setProperty('--clr-1', 'blue');
    r.style.setProperty('--clr-2', 'blue');
    r.style.setProperty('--clr-3', 'blue');
    r.style.setProperty('--clr-4', 'blue');
}

Can you convert your code into a snippet?

Lajos Arpad
– Lajos Arpad

2024-02-23 18:02:40 +00:00
Commented Feb 23, 2024 at 18:02 — Lajos Arpad
– Lajos Arpad, Commented Feb 23, 2024 at 18:02

Alexander Nenashev · Accepted Answer · 2024-02-23 17:44:09Z

1

Usually you set class theme-dark to body element and use CSS veriables for colors:

.theme-dark{
  --body-bg:#333;
  --color:#aaa;
  --input-bg: #555;
}
body{
  background-color: var(--body-bg);
  color: var(--color);
}

input, button{
  color: var(--color);
  background-color: var(--input-bg);
}

<input><button onclick="document.body.classList.toggle('theme-dark')">Toggle dark theme</button>

answered Feb 23, 2024 at 17:44

Alexander Nenashev

26.1k3 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

João Marcelo Over a year ago

i could use the same variables i declared at :root and assign at this .theme-dark class with different colors then it changes the page color when i click at the button?

Alexander Nenashev Over a year ago

@JoãoMarcelo yes

Collectives™ on Stack Overflow

how to create a "light and dark" functioning button using JS?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related