85 added a new "Dark mode" option to the theme. When activated, this would add theme support for dark-editor-style, and enqueue a simple editor stylesheet that swapped the background to black, and the text to white.
This was a good, simple approach, but it was relatively basic. This PR expands on the previous one to include a more accurate and complete dark mode:
This PR expands the existing style-editor-dark.css stylesheet to include proper dark mode colors for some missing elements: namely links and headings.
It also includes a front-end stylesheet so that these colors are applied to the front end as well.
In order to have this be a more accurate dark mode, these stylesheets now use the complimentary color hex values for the grays used in the original theme. For instance, default body text was #191E23 in light mode, and is now shown as #E6E1DC in the dark mode. This is what you'd get if you inverted the color in Photoshop.
For links in dark mode, I've kept those blue, but chosen lighter blue colors from the WordPress palette to maintain AA contrast ratios.
85 added a new "Dark mode" option to the theme. When activated, this would add theme support for
dark-editor-style, and enqueue a simple editor stylesheet that swapped the background to black, and the text to white.This was a good, simple approach, but it was relatively basic. This PR expands on the previous one to include a more accurate and complete dark mode:
style-editor-dark.cssstylesheet to include proper dark mode colors for some missing elements: namely links and headings.#191E23in light mode, and is now shown as#E6E1DCin the dark mode. This is what you'd get if you inverted the color in Photoshop.Screenshots: