1983200 - browser css system colors like Canvas do not reflect dark mode settings

Status: REOPENED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Sasha Firsov]

Steps to reproduce:

For UI library UI theme I need to use browser ssystem colors like Canvas and CanvasText.
On the page which uses the browser preset colors, switching to the Dark mode in browser setting .
Page example: https://simulationlabs.com/github/EPA-WG/custom-element-dist/tree/develop/src/material/theme/colors-native.html

Actual results:

The page system colors remain matching the Light mode.

Expected results:

Dark mode should switch the Canvas to dark color and CanvasText to light.
The browser part of UI reflects the changed palette, the browser/system colors stay in Light.

There is a way around to use own custom colors and light mode detection by CSS media selector or light-dark function. But it would be insencitive to browser or customized choice.

The Native UI theming is #1 in accessibility, unfortunately even base system palette is not adopted by the base colors. Not to mention base emotional palette.
POC on Native, Dark, Light themes:
https://simulationlabs.com/github/EPA-WG/custom-element-dist/tree/develop/src/material/theme/colors.html

navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0"

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

I think this may be a misunderstanding of how these things work.

For the page to respond to Dark mode, I think you need to include color-scheme: dark in your CSS (e.g. in a @media prefers-color-scheme block). This will cause the system colors to change appropriately.

(And then if you want the page as a whole to turn dark, you'll need to do something like html { background: canvas; color: canvasText } or similar, I think. This doesn't just happen by default, as many pages may not have been designed to cope with a dark background. So it's something an author has to explicitly choose to handle.)

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Yes, you need to have something like <meta name=color-scheme content="light dark"> in your HTML, or :root { color-scheme: light dark } in your CSS, or in the appropriate subtree.

Comment 4

[Sasha Firsov]

@ Jonathan Kew [:jfkthame], Emilio Cobos Álvarez (:emilio)

The complain is not abut ability to apply the css via selectors. It is well defined with media celectors and light-dark().

It is about follow browser theming WITHOUT any special CSS. When I use color:CanvasText, background:Canvas I do expect the browser-driven colors would be follwing the browser settings even without any CSS in the html. Which meant to be default when no CSS used in HTML at all.

Those colors also can be used for creation of css theming if they would be honored by the browser itself. I DO NOT want to use own colors for theme, instead want to reuse what user chosen in browser and OS settings. That is the way to show respect to accessibility and personal choice.

Comment 5

[Sasha Firsov]

@Emilio Cobos Álvarez (:emilio), closing the ticket without looking into issue and reading the arguments at lease unethical. Kindly please reopen till the questions cleared.

Comment 6

[Emilio Cobos Álvarez [:emilio]]

(In reply to Sasha Firsov from comment #4)

It is about follow browser theming WITHOUT any special CSS. When I use color:CanvasText, background:Canvas I do expect the browser-driven colors would be follwing the browser settings even without any CSS in the html. Which meant to be default when no CSS used in HTML at all.

Those colors are the default page background and foreground colors so no, without an extra opt in that would break lots of existing content. That is why you also need to set color-scheme: light dark. With that the behavior should be as you describe.

That is the way to show respect to accessibility and personal choice.

It's not a matter of respect or not. If we did that by default content like <html style=color:black> would be unreadable for people with dark mode because there would be a dark background.

(In reply to Sasha Firsov from comment #5)

@Emilio Cobos Álvarez (:emilio), closing the ticket without looking into issue and reading the arguments at lease unethical. Kindly please reopen till the questions cleared.

Well I did look at the issue and our behaviour seems correct per spec and not problematic. It just seemed like you did not specify the color-scheme property.

Is there any concrete example you could show that doesn't behave as you want if you add the color-scheme property on top of color / background?

Comment 7

[Sasha Firsov]

My final goal is to provide the color theming based on browser/user settings AND color choises. I.e. if user selects a dark green as theme background with yellow text, system theme should be able to use Canvas and CanvasText color which would match the OS/browser selection.

The demo with " System driven colors" theme uses browser-defined colors. It does inherit the browser native colors and if the browser choses the green Canvas , it would be reflected.

The trouble that even in dark mode, Canvas still stays white, disregarding of OS or browser palette.
Of cource it is possible to swap the background with text color in dark mode( `background-color:light-dark(Canvas, CanvasText); color: light-dark( CanvasText, Canvas) ), but that is not same as follow the user preferences.

While the full emotional palette is necessary for ANY themeing, that would be not a bug but rather enhancement proposal on CSS w3c scope. Same with rely the full user color theme from browser/OS preferences to CSS.

The ticket is about even simpler case: just respect the user set palette to Canvas and other system colors. And when user switch to dark mode, change that too. I.e. if user sets dark mode for browser, the white background on the page would become dark too.

As of now folks with light sencitive vision have to use the plugins to force it :( Instead of browser settings.
That is an essence of the bug.

The argument of breaking page view for many sites is not applicable as the users would not switch to dark mode if do want to see a white background as of now.
The spec defines system colors, but in assumption to respect the browser settings, not ignoring those. Or I am misinterpreting the standard?

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Isn't what you're describing achieved by forced colors / windows high contrast mode?

Comment 9

[Sasha Firsov]

forced colors and dark mode meant for completely different use cases in accessibility. The forced colors or high contrast mode meant to solve the attention and focus via replacing the background difference by outlines. It is applicable as for dark as for light mode.

The dark mode is designed for people with light sencitivity. But it also useful in other cases like in some devices due to screen hardware specifics: the OLED displays saving energy in dark mode.

The automatic switch has a sence for bright day and dark night, especially when driving.

The ticket is about this automatic light/dark switch support. And as result, accessibility on devices where particular light mode been configured by hardware vendor or consumer.