NOTE: See svelte-theme-select for a better, more complete package

sveltekit-dark-mode

Simple example showing dark mode theme toggle using SvelteKit + TailwindCSS

• Self contained in a single component
• Includes a simple icon toggle plus an animated switch toggle
• 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