We have a child style of a pixel-exit style with a dark alternate variation. Our custom dark mode CSS in extra.less is scoped to :root[data-variation="alternate"], which works correctly when a user explicitly selects Dark mode.
However, when a user selects System variation and their browser/OS is set to dark mode, data-variation is removed from <html> entirely, so our :root[data-variation="alternate"] rules don't apply. The palette CSS variables are handled correctly by variations.less, but our direct selector overrides (gradients, pseudo-element styling, etc.) are missed.
We're aware of the .m-colorScheme() mixin which outputs :root:not([data-variation]) + @media (prefers-color-scheme: dark) and :root[data-color-scheme="dark"]. However, using it in extra.less requires nesting rules inside a parent selector context, which is a different pattern from the flat :root[data-variation="alternate"] .selector { } approach.
Question: What is the recommended pattern for writing custom dark mode rules in extra.less that correctly cover both the explicit Dark variation and the System variation with a dark browser preference?
Is this the correct approach at all or should we be working elsewhere instead of extra.less ?
However, when a user selects System variation and their browser/OS is set to dark mode, data-variation is removed from <html> entirely, so our :root[data-variation="alternate"] rules don't apply. The palette CSS variables are handled correctly by variations.less, but our direct selector overrides (gradients, pseudo-element styling, etc.) are missed.
We're aware of the .m-colorScheme() mixin which outputs :root:not([data-variation]) + @media (prefers-color-scheme: dark) and :root[data-color-scheme="dark"]. However, using it in extra.less requires nesting rules inside a parent selector context, which is a different pattern from the flat :root[data-variation="alternate"] .selector { } approach.
Question: What is the recommended pattern for writing custom dark mode rules in extra.less that correctly cover both the explicit Dark variation and the System variation with a dark browser preference?
Is this the correct approach at all or should we be working elsewhere instead of extra.less ?
