Caching & Cookies

The CMS Questions
1

I use a cookie to control whether a light or dark theme is used for my website:

  • If no cookie is set, my website respects the user’s system preference
  • If the theme cookie set to dark, it uses the dark theme
  • If the theme cookie set to light, it uses the light theme

(It does so by adding a class to the <html> tag.)

I am using the regular Kirby page cache.

I found out that Kirby is pretty smart when handling caching and cookies. (But only if I use Kirby’s functions to set/get cookies, eg. Cookie::set().)

Now, when the cookie is not set, Kirby will cache the page normally. If the cookie is there, Kirby will not cache the page, as is expected.

How can I get Kirby to cache the two additional versions for the light and dark theme and then serve those, whenever a user has set the cookie to the respective value?

Please note, that I do not want to use JavaScript to apply the theme after the page has been loaded.

Any pointers would be much appreciated!

2

I think the best way is to handle the user‘s choice in the browser and not on the server. I usually add these user specific classes via JavaScript.

In this way caching is not involved.

3

Here‘s how I did it: Dark and light mode with light-dark() • Flo Kosiol

4

Nice solution @flokosiol ! Just a heads up, yuo have a typo in the final sentance under the Flickering Colors heading.

5

I specifically do not want to use JavaScript for this. :slightly_smiling_face:

I am interested in how I could cache additonal versions and serve the right one to the user depending on a cookie value.

6

Anyone? :slightly_smiling_face: