{"repo":"beynar/svelte-themes","free":true,"listed":false,"github":"https://github.com/beynar/svelte-themes","clone":"git clone https://github.com/beynar/svelte-themes.git","description":"Perfect SvelteKit dark mode in 2 lines of code. Support System preference and any other theme with no flashing","language":"TypeScript","stars":78,"topics":["sveltekit","sveltejs","dark-mode","theme","dark-theme","themes"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"This library is a port of next-themes for Svelte. All credit goes to pacocoursey and all next-themes contributors. svelte-themes An abstraction for themes in your Svelte app - works with any Svelte environment (SvelteKit, Vite, Webpack, etc.) - ✅ Perfect dark mode in 2 lines of code - ✅ System setting with prefers-color-scheme - ✅ Themed browser UI with color-scheme - ✅ No FOUC (Flash of Unstyled Content) - ✅ Sync theme across tabs and windows - ✅ Disable transition flash when changing themes - ✅ Force pages to specific themes - ✅ Class or data attribute selector - ✅ Theme context - ✅ Svelte 5 ready with modern runes syntax - ✅ Universal - works with any Svelte setup - ✅ SvelteKit dependency Check out the Live Example to try it for yourself. Install Using svelte-themes Add SvelteTheme to your app's root component. In SvelteKit, this would be your +layout.svelte . Props - storageKey = 'theme' : Key used to store theme setting in localStorage - defaultTheme = 'system' : Default theme name. If enableSystem is false, the default theme is light - forcedTheme : Forced theme name for the current page (does not modify saved theme settings) - enableSystem = true : Whether to switch between dark and light based on prefers-color-scheme - enableColorScheme = true : Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons - disableTransitionOnChange = false : Optionally disable all CSS transitions when switching themes - themes = [","default_branch":null,"files":null,"tree":[],"storefront":"/r/beynar","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/beynar/svelte-themes/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}