返回到原始 css 变量值的 JavaScript 切换按钮问题

Question

Im trying to make a toggle switch that changes my color variables I have set. The following code works but I want it to revert back to the original colors if clicked again. Also, if there is a better way to accomplish that Id like to learn how, this seemed to be the most direct way but I am still learning vanilla JS.

css:

:root {
  --bg-color:  #040d14;
  --text-color:  #f0f4f6;
  --border-color: #30363a;
  --highlight-color: #00c805; 
  --secondary-bg-color:#1e2124;
}

js:

change.onclick = () => {
  document.documentElement.style.setProperty('--bg-color', '#f7f7f7');
  document.documentElement.style.setProperty('--text-color', '#333');
  document.documentElement.style.setProperty('--border-color', '#040d14');
  document.documentElement.style.setProperty('--secondary-bg-color', '#ebecec');
 
}

Answer 1

So to me this looks like you are toggling between a dark/light mode. There are a ton of tutorials out there on this but this is the basics of it.

 const button = document.querySelector('button') button.addEventListener('click', toggleTheme) function toggleTheme() { if (document.body.getAttribute('data-theme') === 'light') { document.body.setAttribute('data-theme', 'dark') } else { document.body.setAttribute('data-theme', 'light') } }

 :root { --bg-color: #040d14; --text-color: #f0f4f6; --border-color: #30363a; --highlight-color: #00c805; --secondary-bg-color:#1e2124; } [data-theme="light"] { --bg-color: #f7f7f7; --text-color: #333; --border-color: #040d14; --highlight-color: #ebecec; --secondary-bg-color:#1e2124; } .container { background-color: var(--bg-color); height: 200px; color: var(--text-color); border: 1px solid var(--border-color); }

 <div class="container"> Stuff </div> <button>Toggle</button>

Answer 2

I think your way is the best way. To remove, you can use .removeProperty() .

document.documentElement.style.removeProperty("--bg-color")

Edit

Example of how to toggle between two states. You could also set the initial CSS custom property using JavaScript, which can be useful if you have multiple options that are not predefined.

<div class="container"></div>

:root {
    --bg: red;
}
.container {
    width: 200px;
    height: 200px;
    background: var(--bg);
}

let theme = "red"
const container = document.querySelector(".container")
container.addEventListener("click", function() {
    if (theme === "red") {
        theme = "blue"
        document.documentElement.style.setProperty("--bg", "blue")
        return
    }

    theme = "red"
    document.documentElement.style.removeProperty("--bg")
})