You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
The text was updated successfully, but these errors were encountered:
In #4389, we added this
<meta>tag to setcolor-schemepatternfly-org/packages/documentation-framework/templates/html.ejs
Line 6 in 6493439
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 setcolor-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 withcolor-scheme: darkstuff, like dark checkboxes and the default html/body background color as black instead of white. Exhibits A & B below:(checkbox component page)
(full page checkbox example)
That's the problem. Here are some ideas for a fix.
PF CSS currently sets
color-scheme: darkwhen you add.pf-v6-theme-darkto the<html>element. One fix could be for core to setcolor-scheme: lightas 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 thecolor-schemechanges from a<meta>tag apply pretty much immediately as the page is loading, since it's in the doc<head>, wherecolor-schemein CSS relies on the CSS loading first. So with a CSS only approach like we currently have, the page may load with nocolor-schemeset (defaults to a light theme), only to switch tocolor-scheme: darkafter 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 ofprefers-color-schemeis via JS and adds.pf-v6-theme-darkto<html>manually, I'm thinking the best fix is just to remove the<meta>tag and keep thecolor-scheme: darkrule in the CSS.color-schemewill 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!
The text was updated successfully, but these errors were encountered: