Why first CSS variable resets when I change second? Custom color theme [duplicate]

Question

The purpose is to make a custom site color theme. The problem is when I changing the second CSS variable first resets to its default value.

var mainColor = document.getElementById("main-color");
var secondColor = document.getElementById("second-color");

function color(cssVariable, inputValue) {
  return cssVariable + ":" + inputValue
}

mainColor.addEventListener('input', function() {
  document.documentElement.setAttribute("style", color("--main-color", this.value))
})

secondColor.addEventListener('input', function() {
  document.documentElement.setAttribute("style", color("--second-color", this.value))
})

:root {
  --main-color: black;
  --second-color: whitesmoke;
  --main-font-size: 16px;
  color: var(--main-color);
  font-size: var(--main-font-size);
}

<div class="dropdown-color-container">
  <input type="color" id="main-color">
  <input type="color" id="second-color">
</div>

Is there any way to save changed CSS variables? And how would you implement code for this, what's the easiest solution? I'm beginner in JS

Runnable code: https://www.w3schools.com/code/tryit.asp?filename=GLDQWOUT9HUA

we don't need gif, we need a runnable code that highlight the issue — Temani Afif
– Temani Afif, Commented Dec 5, 2020 at 22:34
@TemaniAfif check picture too, I think there is very helpful info. If no clue I'll add runnable code — John Din
– John Din, Commented Dec 5, 2020 at 22:38

Temani Afif · Accepted Answer · 2020-12-05 22:40:41Z

1

The issue is that you are setting the style attribute so each time you override all the previous inline style.

You need to do it differently using setProperty

var mainColor = document.getElementById("main-color");
var secondColor = document.getElementById("second-color");

function color(cssVariable, inputValue) {
  return cssVariable + ":" + inputValue
}

mainColor.addEventListener('input', function() {
  document.documentElement.style.setProperty("--main-color", this.value);
})

secondColor.addEventListener('input', function() {
  document.documentElement.style.setProperty("--second-color", this.value)
})

:root {
  --main-color: black;
  --second-color: whitesmoke;
  --main-font-size: 16px;
  color: var(--main-color);
  font-size: var(--main-font-size);
}

<div class="dropdown-color-container">
  <input type="color" id="main-color">
  <input type="color" id="second-color">
</div>

answered Dec 5, 2020 at 22:40

community wiki

Temani Afif

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

1 Comment

John Din Over a year ago

Didn't know about that. Thank you!

SNag · Accepted Answer · 2020-12-05 22:46:12Z

1

Change this line
document.documentElement.setAttribute("style", color("--main-color", this.value));

to

document.documentElement.style.setProperty("--main-color", this.value);

Refer:
https://stackoverflow.com/questions/37801882/how-to-change-css-root-color-variables-in-javascript

Demo: jsFiddle

answered Dec 5, 2020 at 22:46

SNag

18.2k11 gold badges58 silver badges71 bronze badges

Collectives™ on Stack Overflow

Why first CSS variable resets when I change second? Custom color theme [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related