relative color syntax doesn't work with light-dark()?

My color palette is defined using light-dark(), e.g.

--bg-1: light-dark(var(--l-bg-1), var(--d-bg-1));

--bg-1: light-dark(var(--l-bg-1), var(--d-bg-1));

If I use relative color syntax, e.g.

background-color: rgb(from var(--bg-1) r g b / .5)

background-color: rgb(from var(--bg-1) r g b / .5)

…it doesn't set it. If I declare --bg-1 to be something fixed like #f1f1f1 then it works. I tried in the latest versions of chrome and firefox. Am I doing it wrong?

4 Replies

MarkBoots•3mo ago

I don't think the relative color syntax does accept a function as a value. i know that the light-dark-function returns a color, but don't know if it sees it like that The other way around it will work ofcourse (but that might not suit your setup)

background-color: light-dark(
  rgb(from var(--l-bg-1) r g b / .5), 
  rgb(from var(--d-bg-1) r g b / .5)
)

background-color: light-dark(
  rgb(from var(--l-bg-1) r g b / .5), 
  rgb(from var(--d-bg-1) r g b / .5)
)

if it is all about the opacity, you could also do it with color-mix (that does accept the light-dark function)

--bg-1: light-dark(var(--l-bg-1), var(--d-bg-1));
background-color: color-mix(in hsl, var(--bg-1), transparent 50%);

--bg-1: light-dark(var(--l-bg-1), var(--d-bg-1));
background-color: color-mix(in hsl, var(--bg-1), transparent 50%);

as this does work, maybe it's something they forgot (or is a bug) in the relative color syntax (or is too complex to implement)

MarkBoots•3mo ago

@jcayzac I asked around, it's a known bug

jcayzac•3mo ago

@MarkBoots thanks! that workaround is a life saver!

MarkBoots•3mo ago

no problem, you're welcome

Gaming

Programming

relative color syntax doesn't work with light-dark()?