0

How can I change the value of the variables inside this block [user-theme="theme"] with JS? I have the same variables in other blocks that should not be affected because I flip between them by changing the attribute value.

[user-theme="theme"] {
   --cell-checked-in: red;
   --cell-checked-out: grey;
   --cell-online-booking: yellow;
   --cell-offline-booking: white;
}

The one solution I found that works (partly) is this one but it adds inline styles in the HTML tag which I don't want. I also can't do something like $("html[user-theme=theme]").get(0).style.setProperty("--cell-online-booking", "red");

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
wind_kind
  • 561
  • 6
  • 23
  • 4
    Don't change the values in CSS using JS. The correct pattern to use here would be to define a new `user-theme` value and hook a new set of CSS rules to that, no JS involved. – Rory McCrossan Feb 11 '20 at 15:45
  • @freedomn-m - this helps assuming my variables are set in :root but my variables are inside [user-theme="theme"]. How do I target that if it's possible at all. Out of interest sake. – wind_kind Feb 11 '20 at 16:00
  • @RoryMcCrossan - you are correct and I have been staring at this so long I've lost track of what I'm supposed to be doing and started creating problems to solve that I shouldn't have to. – wind_kind Feb 11 '20 at 16:02
  • 1
    "The one solution I found that works (partly) is this one but it adds inline styles in the HTML tag which I don't want." — That's how CSS variables are designed to work. You could change the rulesets themselves, but that would be needlessly complex. – Quentin Feb 11 '20 at 16:02
  • `$("html[user-theme=theme]").get(0).style` could be simplified to `document.documentElement.style` – Quentin Feb 11 '20 at 16:04
  • @wind_kind — If you change the `user-theme` attribute (which is invalid HTML and should be a `data-` attribute or a class), then the ruleset with the `[user-theme="theme"]` will no longer apply, and the ruleset with the `[user-theme="different-theme-entirely"]` that you would have added in response to the second half of Rory's initial comment would instead. – Quentin Feb 11 '20 at 16:06

0 Answers0