Should `data-color-scheme` define `background` and `color`?

[mimarz]

When using Designsystemet I ran into problems using data-color-scheme to always enforece dark/light mode on "surfaces" and other parts of the site.

When using data-color-scheme it would set background and color on the specific element the attribute is used on, this would mess up the design as we used other colors and backgrounds than what i predefined.

Yes, this can easily be remedied by setting inherit on the element, but this feels cumbersome as not everyone might know this, or have to make new classes just remedie this.

Our definition in base.css:

body,
[data-color-scheme] {
  color: var(--ds-color-neutral-text-default);
  background: var(--ds-color-neutral-background-default);
}

What is reason for the [data-color-scheme] selector to be there? Functionally we only want the data attr to flight between color-schemes, so if we don't need it I suggest we remove it.

This will be a breaking change, but looks to be a bug by default, so we need to figure out when and how to communicate this fix.

[Barsnes]

I think it should, and I'll put my thoughts on why, just like I did on slack:

Inheriting color means that it will most likely inherit a color that does not match the color scheme you are switching to, same goes for background.
In most cases it help the consumer when switching color schemes, and there are only a few exceptions where you would not want this to happen.
If we set the wrong colors for you, simply change this with CSS - which you would need to do anyways.

If we remove it there is a very good chance that the inherited colors are wrong, meaning the consumer always has to set these two properties themselves.

[oddvernes]

because the color variables are re-declared on [data-color-scheme], color will not inherit from body as a direct value would. See codepen

[oddvernes]

I was thinking you could possibly do something like body, [data-color-scheme]:not([class*="ds-"]) to exclude ds components but i have not tested extensively

This was not relevant to the problem, ds-components override the selector in base.css already, the issue was data-color-scheme on non-ds elements but this is not solvable. We will update docs

[mimarz]

We discussed on daily today that we will update the documentation for data-color-scheme with a remark about background and color being defined and why.