Блог

Я пытаюсь создать переключатель, который изменяет заданные мной переменные цвета. Следующий код работает, но я хочу, чтобы он вернулся к исходным цветам, если щелкнуть снова. Кроме того, если есть лучший способ добиться этого, я хотел бы узнать, как это сделать, это казалось самым прямым способом, но я все еще изучаю ванильный 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');
 
}
  

Итак, для меня это выглядит так, как будто вы переключаетесь между темным / светлым режимом. По этому вопросу существует множество руководств, но это основы.

 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>  

Я думаю, что ваш способ — лучший способ. Чтобы удалить, вы можете использовать .removeProperty() .

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

Редактировать

Пример переключения между двумя состояниями. Вы также можете установить начальное пользовательское свойство CSS с помощью JavaScript, что может быть полезно, если у вас есть несколько параметров, которые не являются предопределенными.

 <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")
})