This repository demonstrates how to integrate a dark mode toggle into a SvelteKit application.
On the first visit of a user, we retrieve the user preference (dark or light) using a media query. We change the
data-theme attribute of the
html tag accordingly. This changes the CSS variables which are responsible for the theming.
The toggle button changes this attribute as well. But on top of that, we also set a
theme cookie to make the user's choice persistent. This also has the big advantage that there will be no flashing with every new page visit. (This would happen with a
localStorage-based implementation.) In fact, the browser sends the cookie along with the request to the page, and we use it in the server handle hook to transform the
html accordingly which is sent back to the browser.
I have used the following videos as a reference:
A different, more server-side approach is taken here:
This prevents the initial flash but does not take into account the initial user preference with a media query.
A more simple solution, using
localStorage but without the flashing, can be found here: