css - WordPress LightDark Theme best practices? Is there a way that really works?

We currently have a light/dark theme enabled on our WordPress site using cookies and a .dark class in CSS. It works, but makes using WP Total Cache almost not worth it as any post/page using the cookie cannot be page cached. I tried using localstorage instead, but was unable to get past an annoying "flash" when changing pages: each new navigation loads the default light css, then applies the dark css, resulting in a glimpse of the light theme before switching, very annoying. I was able to minimize the flash, but it's still there. I'm not finding any plugins that solve the light/dark theme question, and so far remain stuck using cookies and accepting that caching just isn't possible Does anyone have a working example of light/dark theme switching that works with caching, and actually works?

We currently have a light/dark theme enabled on our WordPress site using cookies and a .dark class in CSS. It works, but makes using WP Total Cache almost not worth it as any post/page using the cookie cannot be page cached. I tried using localstorage instead, but was unable to get past an annoying "flash" when changing pages: each new navigation loads the default light css, then applies the dark css, resulting in a glimpse of the light theme before switching, very annoying. I was able to minimize the flash, but it's still there. I'm not finding any plugins that solve the light/dark theme question, and so far remain stuck using cookies and accepting that caching just isn't possible Does anyone have a working example of light/dark theme switching that works with caching, and actually works?

• css
• cookies

Share Improve this question asked Oct 17, 2019 at 16:59 Kip KniskernKip Kniskern 1344 bronze badges 2

• Hi {user}, welcome to WordPress Development. As a rule, the community considers questions about third-party plugins (such as WP Total Cache) off-topic so you might notice some down-votes and answers may be slow if they come at all. Additionally, the community is not too fond of plugin requests. You can find out what questions are a good fit here. It may be worth bringing this up with the theme creator. – Matthew Brown aka Lord Matt Commented Oct 18, 2019 at 2:16
• I'm curious as to how you're testing for user preferences? There are some good suggestions in this related post here: stackoverflow/questions/50840168/… – Trisha Commented Oct 22, 2019 at 20:22

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You can try fragment caching (https://www.justinsilver/technology/wordpress/w3-total-cache-fragment-caching-wordpress/)

If this is your own theme (that you made) I have some suggestions. If the theme is third-party, I suggest making a child theme (lots of helpful advice on Google about this).

As you are using a cookie to pick light or dark, you should be able to hook the enqueued styles and dequeue the unwanted one with the style_loader_tag filter.

add_filter( 'style_loader_tag',  'fix_style_choice', 10, 4 );
function fix_style_choice( $html, $handle, $href, $media ){
    // check cookies and only enqueue the right style (dequeue the wrong one).
}

My guess is this could sort out the problem.

As Tom Broucke points out, fragment caching could also help.

Another approach may be to give the two style sheets a very short (or a very long) cache time.

Finally, there is also a Javascript solution to the flash of unstyled content issue.