{"repo":"CaptainCodeman/svelte-theme-select","free":true,"listed":false,"github":"https://github.com/CaptainCodeman/svelte-theme-select","clone":"git clone https://github.com/CaptainCodeman/svelte-theme-select.git","description":"Theme switcher for Svelte & TailwindCSS","language":"Svelte","stars":21,"topics":["svelte","dark-mode","dark-theme","prefers-color-scheme","sveltekit","theme"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"svelte-theme-select Customizable Svelte components for theme selection (light mode / dark mode) inspired by TailwindCSS. Flicker-free, synchronizes across tabs, works with or without SSR and doesn't require unnecessary use of transformPageChunk so is cache-friendly. About The TailwindCSS site is a great example of excellent UX. A simple icon gives access to a menu to set the theme to light mode or dark mode, or allow the system to automatically switch based on your device configuration (which can change based on the time of day). A particularly nice touch is that it shows if the default system mode has been overridden using a different icon color. For mobile users, where the navigation bar shrinks to become an expandable menu, they have a larger-hit-target version providing the same features. They have since switched to a single set of icons allowing quick switching between system, light, or dark modes that is compact and works well on mobile or desktop. This project re-creates these UI widgets and provides the system to persist and apply the selected theme in your SvelteKit project. Please refer to TailwindCSS Dark Mode documentation for how to use dark mode styles within your app. Usage Install Package Install using your package manager of choice: pnpm i svelte-theme-select Add to root +layout.svelte Include the component which writes the JS into the page header to apply the theme before hydration (this avoids a flash of the wrong styles). The component provides the desktop","default_branch":null,"files":null,"tree":[],"storefront":"/r/CaptainCodeman","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/CaptainCodeman/svelte-theme-select/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."}