https://github.com/captaincodeman/sveltekit-dark-mode

Dark mode toggle using SvelteKit and TailwindCSS
https://github.com/captaincodeman/sveltekit-dark-mode

Last synced: 7 months ago
JSON representation

Dark mode toggle using SvelteKit and TailwindCSS

• Host: GitHub
• URL: https://github.com/captaincodeman/sveltekit-dark-mode
• Owner: CaptainCodeman
• Created: 2022-07-27T22:58:05.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-12-31T18:40:42.000Z (about 3 years ago)
• Last Synced: 2025-05-07T04:37:49.302Z (9 months ago)
• Language: Svelte
• Size: 208 KB
• Stars: 19
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
NOTE: See [svelte-theme-select](https://github.com/CaptainCodeman/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

![dark mode](https://github.com/CaptainCodeman/sveltekit-dark-mode/blob/master/static/dark.png?raw=true)

Light Mode

![light mode](https://github.com/CaptainCodeman/sveltekit-dark-mode/blob/master/static/light.png?raw=true)