Conditional styles with css custom properties - css

Question

I enjoy using css custom properties, but there's this thing that I often find that I wish I could do.
I wish to be able to apply some styles conditionally based on the value of a css custom property. Here's some pseudo-code:
.something {
border: var(--is-dark-theme) ? 1px solid : none;
}
I understand that custom properties do not work like this. But may be there is some other way that I'm not aware of that could help me achieve a similar result?
Or perhaps there is some spec proposal that would this possible in the future?

Answer 1

Here is another idea similar to Ori Drori answer where I rely on the use of an invalid value inside border to remove the border. This can be useful in case you want to use keywords like false/true/yes/no
.something {
border: var(--is-dark-theme,2px) solid black;
}
<div class="something">Dark theme</div>
<div class="something" style="--is-dark-theme: false">Light theme</div>

Answer 2

You can sometimes use calc() to get roughly similar results. In this case if --is-dark-theme is 0 or 1, you can multiply it by the width of border, to show or hide it:
.something {
border: calc(var(--is-dark-theme) * 1px) solid black;
}
<div class="something" style="--is-dark-theme: 1">Dark theme</div>
<div class="something" style="--is-dark-theme: 0">Light theme</div>

Answer 3

In cases where you have something like "condition xyz is on or off" (like in the light theme vs dark theme example) you can use the following CSS trick (I know this looks completely weird if you see this trick for the first time, but in contrast to the tricks presented in the other answers, this one will work for all CSS properties):
For each on/off condition define two custom properties, one for the 'on' case, one for the 'off' case. Instead of on use the value initial, instead of off use value (space character).
.light-theme {
--is-light-theme: initial;
--is-dark-theme: ;
}
.dark-theme {
--is-light-theme: ;
--is-dark-theme: initial;
}
div {
font-family: Helvetica, Arial, sans-serif;
padding: 1rem;
color:
var(--is-light-theme, black)
var(--is-dark-theme, white);
background-color:
var(--is-light-theme, white)
var(--is-dark-theme, black);
border:
var(--is-light-theme, none)
var(--is-dark-theme, 5px solid #aaa);
}
<div class="light-theme">
light theme
</div>
<div class="dark-theme">
dark theme
</div>

Answer 4

Just FYI: The following is not working today (2023-02-06), but someday in future there might be this very nice CSS feature called "CSS style container queries":
/* not working today (2023-02-06), maybe in future */
#container style(--theme: dark) {
.box {
border: 1px solid #aaa;
}
}