[Support request] Implementing Performant prefers-color-scheme (dark mode) with GeneratePress

[Brooke.]

For an upcoming project I want to implement dark and light modes using the prefers-color-scheme CSS media query. In the initial research phase I read this great article on web.dev recommends maintaining three stylesheets to handle this. Quoting from the article:

• style.css that contains generic rules that are used universally on the site.
• dark.css that contains only the rules needed for dark mode.
• light.css that contains only the rules needed for light mode.

In a static site it would be fairly straightforward to follow this when loading styles. Even with WordPress, wp_enqueue_style supports screen in the parameters. However, the trick here is going to be to implement this in the most performant manner with the fewest “extra” rules. Part of that is just the nature of how WordPress and GeneratePress load styles.

For example, with my child theme I am loading base styles, loading styles from the customizer, loading custom child theme styles. That’s all pretty standard but creating a dark mode has me doing a bit of a “re-think”. In a perfect world, I’d only have the three stylesheets listed above. I’ve thought about disabling the customizer of GeneratePress Premium and then pulling in the base style sass into my child theme directly to be able to work with a single “common” stylesheet. Of course that has issues with forward compatibility.

In reality, I’ll likely just add a dark.css stylesheet that only adds a stylesheet on dark mode, even thought that means “extra” styles will be loaded which is a bummer. Before I do that, I’m curious if this has come up before and if anyone here has any thoughts.

[Tom]

Hi there,

Something like this is very simple when building a simple static site (as you mentioned), but it does become more difficult as you start working with dynamic sites/themes where styles are coming from multiple places.

If it were me, I would go the single dark.css file route. There shouldn’t be a ton of things you need to overwrite in that file in order to accomplish a dark style as long as your default styling isn’t super complex.

CSS variables would make it easier as well, but there are some browser support issues there, and the Customizer doesn’t currently support them (it will soon).

Let me know what you decide on – interested in learning how difficult it was and what we can do to make it easier 🙂

[Author]

Posts