How to add multiply styles document.documentElement.style.setProperty (js)

Yanoboku 0
Viewed 30

I'm adding dark and light theme, I changed bg-color, but can't change text color

Css (I don't have variables)

body {
    color: var(--text-color, white);
    background-color: var(--background, #181818);
    margin: 0px;
    padding: 0px;
}

Js

document.getElementById('dark_theme').addEventListener
    ('click', () => {
        document.documentElement.style.setProperty
        ('--background', '#181818');
        ('--text-color', 'white')

    })
document.getElementById('light_theme').addEventListener
    ('click', () => {
        document.documentElement.style.setProperty
        ('--background', 'white');
        ('--text-color', 'black')
        
    })
web javascript css html
4 Answers

This statement, by itself, does nothing:

('--text-color', 'white')

(It's not even really a statement, just an expression whose result is ignored.)

The line before it isn't a complete statement in JavaScript. Newlines/whitespace aren't important to the interpreter. (But are very important to humans for readability.) Both of the previous lines are a statement:

document.documentElement.style.setProperty
('--background', '#181818');

That statement is terminated by a semi-colon. Personally I prefer the readability of a single line in this case:

document.documentElement.style.setProperty('--background', '#181818');

If you want to execute multiple such statements, you need the whole statement:

document.documentElement.style.setProperty('--background', '#181818');
document.documentElement.style.setProperty('--text-color', 'white');

In this case you may want to stick with single-line statements for readability, so you can easily see where one statement ends and another begins.

If you have many such statements and want to reduce their length for brevity and/or readability, you can store the reference in a variable:

const style = document.documentElement.style;
style.setProperty('--background', '#181818');
style.setProperty('--text-color', 'white');
// etc...
user3pn10

I suggest you use classList methode like this:

    function changeTheme(){
        document.body.classList.remove("theme1");
        document.body.classList.add("theme2");
    }
.theme1:{
    background:white;
    color:black;
}

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

hata.IR0

This is how i add dark and light mode to work without any error.

let toggle = document.querySelector("#toggle")
let body = document.querySelector("body")

toggle.addEventListener("click", ()=>{
if(body.classList.contains("dark")) return body.classList.remove("dark")

return body.classList.add("dark")
})
body{
 height: 100vh;
 width: 100vw;
}

.dark{
background: black;
}

.title{
color: gray;
}

.dark .title{
color: #ffffff;
}
<body class="dark">
<button id="toggle"> dark/light </button>
<div class="title">
<h1> My Title</h1>
</div>
</body>

Colorado Akpan0

If I were you I'd have added a class to the body element such as ".darkTheme" and that'd be only one line of JS and a faster program. The snippet below shows you how to do it, just a point that you can have the body inherit a theme (class) by default.

document.getElementById('dark_theme').addEventListener('click', () => {
  document.body.classList.add("darkTheme");
  document.body.classList.remove("lightTheme");
});
document.getElementById('light_theme').addEventListener('click', () => {
  document.body.classList.remove("darkTheme");
  document.body.classList.add("lightTheme");
});
body {
  color: var(--text-color, white);
  background-color: var(--background, #181818);
  margin: 0px;
  padding: 0px;
}

body.darkTheme {
  --background: #181818;
  --text-color: white;
}

body.lightTheme {
  --background: white;
  --text-color: black;
}
<html>

<body>
  <button id="dark_theme"> Apply the dark theme </button>
  <button id="light_theme"> Apply the light theme </button>
</body>

</html>

Although if you don't seek this way, I can help you with your own.

The point is your JS code ends the setProperty method with ");" and you can't expect your code to work as "('--text-color', 'white')" makes no sense.

You can edit your JS like this:

let myDocStyle = document.documentElement.style;
document.getElementById('dark_theme').addEventListener('click', () => {
  myDocStyle.setProperty('--background', '#181818');
  myDocStyle.setProperty('--text-color', 'white');
});
document.getElementById('light_theme').addEventListener('click', () => {
  myDocStyle.setProperty('--background', 'white');
  myDocStyle.setProperty('--text-color', 'black');
});
Merlin the Immortal0
Related