sveltekit-dark-mode
Simple example showing dark mode theme toggle using SvelteKit + TailwindCSS
- Includes a simple icon toggle plus an animated switch toggle
- Smooth theme transition using a custom class so switch is less jarring
- Overrides system setting, once back to current system setting override is removed
- Will dynamically switch based on system preferences
Tip: Use the "Emulate CSS media feature prefers-color-scheme" in the "Rendering" tab of dev-tools to test different browser settings while testing without updating your Operating System config.
Screenshots
Dark Mode
Light Mode