Bug - Dark mode does not respect system settings and defaults to light mode on every page load

[garrett]

Describe the problem

All pages for PatternFly.org are in light mode by default, regardless of system settings. Manually switching to dark mode does not work, except while on that page.

Expected behavior

PatternFly.org should default to the system color scheme. There can be a preference to override the theme (especially to preview widgets in light/dark modes for reference while developing), but it should be the system mode by default and there should be a way to get back to system default too.

Any other information?

Sadly, I often have vision issues where I need dark mode, either due to migraine or allergy problems. I have to set my system and apps to dark mode.

When it's not too bad, I still try to work, but blasting bright light in my face is physically painful and will make my headache and/or eye pain worse (depending on the cause). Too much brightness, and I can't even work.

(I also have astigmatism, which means I need light mode too, when I'm able to tolerate it. But when I need it, using dark mode overrides that for me.)

This was why I build dark mode in Cockpit and pushed for it in PatternFly. 😉 We should also have it for the website, especially since PatternFly has the ability to do so.

There should be a trinary setting, with auto, light, and dark. In Cockpit we have a switcher with text in the menu, like this:

GNOME has an icon with text, which has light and dark. It's a toggle, as it is the system so it sets the system color scheme:

Discord has a trinary state, of light, dark, and system:

Since PatternFly is a reference site and people may need to see light and dark modes for widgets in cases where they do not want to change their system settings, I think it needs 3 manual states. As it uses a sun and moon icon currently, I'd suggest something like what GNOME uses for an icon, the half filled circle: ◐

This means, it could be accessible by default with the system setting and then someone could override it for reference (when they need reference dark/light widgets).

[garrett]

Here's a mockup of how it could look, based on the current site:

Here is the SVG source:

I used the sun and moon from the website, and made a light/dark icon. The light/dark system icon and the moon icon are the same sizes: 14 px. The sun is 20. The goal was to have each be roughly 16px wide, but the visual weight of the sun versus the moon is quite different, due to the sun's inner part and the rays. To make them all the same visual weight, I nudged down the system and dark mode icons and nudged up the light mode sun.

Here's an optimized (with svgo) pixel-perfect SVG icon I made for the system light/dark icon @ 14px:

pf-dark-mode-system-paths-opt.svg

(It may be invisible in light mode. It does show up in dark mode, however. 😉 and the top bar on the PatternFly site is always dark.)

The icons should be obvious by context, but they should also have tooltips (which they appear to not have at the moment).

[edonehoo]

Closing: this was addressed via #4389. Let me know if you have questions!