kvetoslavnovak / sveltekit-dark-mode

Dark mode toggle using SvelteKit and TailwindCSS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

dark mode

Light Mode

light mode

About

Dark mode toggle using SvelteKit and TailwindCSS


Languages

Language:Svelte 78.7%Language:JavaScript 11.3%Language:HTML 7.2%Language:CSS 2.9%