Dark Mode in SvelteKit with SSR!

Dark mode is cool. Dark mode which works with and without JavaScript enabled? Very cool. There's a lot of great apps out there that have dark mode... but how many take the time to make their dark mode work without JS enabled? Not a lot, sadly. In this episode, I walk through how to use hooks, endpoints, and cookies in order to make a dark mode that works for all types of users.

🤯 Support

⏱️ Timestamps:
* 00:00 - Introduction
* 00:25 - Demo
* 01:00 - Icons, Stores, Nav bar changes
* 03:30 - theme toggle
* 05:10 - theme endpoint
* 07:20 - hooks

💌 Newsletter:

🪐Elsewhere:

💭Concepts:
* Dark and Light mode in SvelteKit

📚Resources:

🎬 Subscribe!

My name is David W Parker and I’m creating and publishing videos on ProgrammingTIL to help teach anyone and everyone who wants to code. I’m a huge fan of Ruby on Rails, Svelte, TailwindCSS, and WebGL. I’ve used React a lot in the past, as well as some Vue and AngularJS. I’ve done some professional Python and Django. I like to create real applications and my tutorials will walk you through how to build something real from beginning-to-end.

#svelte #sveltekit

[jourlez]

I really like your tutorials, they helped me a lot.
I'm sad to that it's been so long since the last one. Hoping to see more from you soon.

[gyurielf]

Nice guide! In SSG(with adapter-static) mode, I can't get rid the flickering/flashing on reload.... :(

[shellwhale]

Hello David, theses days I simply use :

@media (prefers-color-scheme: dark) {
body {
@apply dark;
}
}