search

Automattic / themes

Free WordPress themes made by Automattic for WordPress.org and WordPress.com.
https://themeshaper.com
GNU General Public License v2.0
887 stars 355 forks source link

Spearhead: Dark mode text is unreadable by default when a preset color is selected #2644

Open kjellr opened 3 years ago

kjellr commented 3 years ago

In light mode, the theme automatically adjusts the foreground text to pass contrast tests when one of the preset background colors is selected. This is broken when dark mode is active:

Light Mode Dark Mode
Screen Shot 2020-10-21 at 9 33 13 AM Screen Shot 2020-10-21 at 9 33 19 AM
  1. While using dark mode, add paragraph blocks.
  2. Set them to the preset background colors.
  3. Notice that the text is unreadable and/or low contrast.
pbking commented 3 years ago

Some observations:

When using the "Primary/Secondary" colors as background colors the colors shown in the "editor" vs the "viewer" differ. This seems to stem from the same issue that incorrectly defines what the foreground color should be for elements with a "primary/secondary" background color while in dark mode.

Editor: image

View: image

And from what I can tell the 'View' instance is correct and the 'Editor' is not.

pbking commented 3 years ago

The cause seems to be that... the Customizer? is adding the background color as a style. Which is necessary for a "non primary/secondary/tertiary" color. However, the "dark mode" colors of what those "primary/secondary/tertiary" colors means something different than what the color swatches represent and shouldn't be enforced in that situation and rather rely on the .has-foreground-background-color[class] stylings.

pbking commented 3 years ago

So further research has determined that the cause is due to the DYNAMIC colors being defined in /spearhead/functions.php that define the 'editor-color-palette' colors. ONLY the 'light mode' colors are defined, thus even if the user's browser is in "dark mode" the "light mode" defined colors are shown in the editor. These are the colors that are applied to the element as a style which is causing the issue.

Because "foreground" is "Black" in light mode and "White" in dark mode, but only defined as "White" in the functions.php block the editor is always representing "foreground" as "black".

A possible fix would be to (somehow?) determine the light/dark mode of the user's browser when the editor page is rendered and supply the appropriate primary/secondary/tertiary colors based on that setting. I'm not sure that this is something (easily) possible, but that would give the editor the "correct" representation.

Another possible fix would be for the editor to ONLY apply the style to elements that are NOT styled using a pre-defined color (which appear to already be handled by adding the appropriate class). ( This has been opened to evaluate that particular fix.)

danieldudzic commented 3 years ago

https://github.com/Automattic/themes/issues/2819 is the same issue

sbathompson-he commented 3 years ago

16005107-hc reported this today.