Configure/disable light/dark mode custom variables?

[j9t]

Lightning CSS inserts code like --lightningcss-light:initial;--lightningcss-dark: ;, apparently on encountering the color-scheme property. Unless I’m missing something (pointer appreciated), it would be great to be able to disable this code being added.

[devongovett]

raise your browser targets to ones where light-dark is supported natively.

[j9t]

Got it, thanks @devongovett. Do you want to keep this open if this could be interesting to make configurable, or do you consider this done implicitly by means of browser targeting?

[kizu]

This is also something that we would love to have.

Why: we have our own pre-existing solution that uses the same technique (space toggles), but which is applied in a slightly different way.

So, if we have color: light-dark(#fff, #000), right now, Lightning CSS transforms its usage into color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000), but we want to use our existing variables: color: var(--LIGHT, #fff) var(--DARK, #000).

Also, because we already have all the setup needed (and a more elaborate than what Lightning CSS outputs), we'd also want to have an option to completely omit the setup code (the one that conditionally switches the space toggles).

So, a proposal: a new config option, something like

lightDark: {
    lightVariable: '--LIGHT',
    darkVariable: '--DARK',
    omitSetup: true,
},