Bug - dark theme toggle issues #4404
Description
In #4389, we added this <meta> tag to set color-scheme
Basically what that does is tells the page that it can render in either light or dark mode (preferring light as the default, since it comes first), based on the device/browser's preference (if @media (prefers-color-scheme: dark), it will set color-scheme: dark). However we also allow you to toggle dark theme independent of the OS setting, so if you're looking at patternfly.org in light theme and your OS/browser is set to dark theme, you'll get light theme PF with color-scheme: dark stuff, like dark checkboxes and the default html/body background color as black instead of white. Exhibits A & B below:
That's the problem. Here are some ideas for a fix.
PF CSS currently sets color-scheme: dark when you add .pf-v6-theme-dark to the <html> element. One fix could be for core to set color-scheme: light as a default (when dark theme is not enabled).
We could also just remove the <meta name="color-scheme" content="light dark"> tag, but that begs the question for why you would use <meta name="color-scheme"> in the first place. AFAIK the main benefit of <meta> over CSS is that the color-scheme changes from a <meta> tag apply pretty much immediately as the page is loading, since it's in the doc <head>, where color-scheme in CSS relies on the CSS loading first. So with a CSS only approach like we currently have, the page may load with no color-scheme set (defaults to a light theme), only to switch to color-scheme: dark after the CSS loads, potentially creating a UI change after stuff is already on the page.
Since all of our dark theme styles are scoped specifically to .pf-v6-theme-dark (they're not in a @media (prefers-color-scheme: dark) media query), and org's OS/browser detection of prefers-color-scheme is via JS and adds .pf-v6-theme-dark to <html> manually, I'm thinking the best fix is just to remove the <meta> tag and keep the color-scheme: dark rule in the CSS. color-scheme will apply at the same time dark theme styles from PF are applied.
But maybe I've overlooked or misunderstood something so I'd love to hear others thoughts as well!
Metadata
Metadata
Assignees
Type
Projects
Status