- This topic has 1 reply, 2 voices, and was last updated 1 year, 7 months ago by Tom.
November 29, 2020 at 8:27 pm #1557530Brooke.
For an upcoming project I want to implement dark and light modes using the
prefers-color-schemeCSS 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,
screenin 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.cssstylesheet 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.November 30, 2020 at 10:04 am #1558906TomLead DeveloperLead Developer
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.cssfile 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 🙂
- You must be logged in to reply to this topic.