Sveltekit Dark Mode

Dark mode toggle using SvelteKit and TailwindCSS

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


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.


Dark Mode

Light Mode

Top categories

Loading Svelte Themes