{"id":19522164,"url":"https://github.com/captaincodeman/svelte-theme-select","last_synced_at":"2025-04-26T09:32:05.123Z","repository":{"id":64971821,"uuid":"579735963","full_name":"CaptainCodeman/svelte-theme-select","owner":"CaptainCodeman","description":"Theme switcher for Svelte \u0026 TailwindCSS","archived":false,"fork":false,"pushed_at":"2024-10-24T19:26:54.000Z","size":340,"stargazers_count":19,"open_issues_count":6,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-17T20:46:20.189Z","etag":null,"topics":["dark-mode","dark-theme","prefers-color-scheme","svelte","sveltekit","theme"],"latest_commit_sha":null,"homepage":"https://captaincodeman.github.io/svelte-theme-select/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CaptainCodeman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-18T18:36:47.000Z","updated_at":"2025-02-05T22:37:20.000Z","dependencies_parsed_at":"2024-11-11T00:37:33.498Z","dependency_job_id":"7b140577-1bfe-487e-a493-d70a47eb85c7","html_url":"https://github.com/CaptainCodeman/svelte-theme-select","commit_stats":{"total_commits":15,"total_committers":1,"mean_commits":15.0,"dds":0.0,"last_synced_commit":"79678bb30ee09834c4a7f831f706b163f1f06b69"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-theme-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-theme-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-theme-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-theme-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CaptainCodeman","download_url":"https://codeload.github.com/CaptainCodeman/svelte-theme-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967219,"owners_count":21515563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-mode","dark-theme","prefers-color-scheme","svelte","sveltekit","theme"],"created_at":"2024-11-11T00:37:28.533Z","updated_at":"2025-04-26T09:32:04.851Z","avatar_url":"https://github.com/CaptainCodeman.png","language":"Svelte","readme":"# svelte-theme-select\n\nCustomizable Svelte components for theme selection (light mode / dark mode) inspired by TailwindCSS.\n\n\u003cimg width=\"955\" alt=\"svelte-theme-select-dark-mode\" src=\"https://user-images.githubusercontent.com/304910/208352220-3b45ab48-d371-4580-abcf-e55ef872577c.png\"\u003e\n\n\u003cimg width=\"955\" alt=\"svelte-theme-select-light-mode\" src=\"https://user-images.githubusercontent.com/304910/208352212-ed8c37f0-a5a3-4a87-acdb-cf922e013fad.png\"\u003e\n\n## About\n\nThe [TailwindCSS site](https://tailwindcss.com/) is a great example of excellent UX and the theme select option is particularly nice. 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).\n\nA particularly nice touch is that it shows if the default system mode has been overridden using a different icon color.\n\nFor mobile users, where the navigation bar shrinks to become an expandable menu, they have a larger-hit-target version providing the same features.\n\nThis 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](https://tailwindcss.com/docs/dark-mode) documentation for how to use dark mode styles within your app.\n\n## Usage\n\n### Install Package\n\nInstall using your package manager of choice:\n\n    pnpm i svelte-theme-select\n\n### Add to root +layout.svelte\n\nCreate an instance of the theme manager in your root `src/routes/+layout.svelte` file and include the `\u003cTheme\u003e` component which writes the JS into the page to apply the theme. The `\u003cThemeToggle\u003e` component provides the desktop icon and menu, the `\u003cThemeSelect\u003e` component provides the mobile friendly equivalent. This is a cut-down layout, checkout the [ready made templates available from TailwindUI](https://tailwindui.com/).\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { createThemeSwitcher, Theme, ThemeToggle, ThemeSelect } from 'svelte-theme-select'\n  import '../app.postcss'\n\n  createThemeSwitcher()\n\u003c/script\u003e\n\n\u003cnav\u003e\n  \u003c!-- desktop navigation --\u003e\n  \u003cdiv class=\"hidden md:block\"\u003e\n    \u003c!-- logo and rest of options --\u003e\n    \u003cThemeToggle /\u003e\n  \u003c/div\u003e\n\n  \u003c!-- mobile navigation --\u003e\n  \u003cdiv class=\"block md:hidden\"\u003e\n    \u003c!-- logo and rest of options --\u003e\n    \u003cThemeSelect /\u003e\n  \u003c/div\u003e\n\u003c/nav\u003e\n\n\u003cslot /\u003e\n\n\u003cTheme /\u003e\n```\n\n### Configure TailwindCSS dark-mode\n\nConfigure TailwindCSS to [toggle dark mode manually using a class](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually):\n\n```js\nconst config = {\n  content: ['./src/**/*.{html,js,svelte,ts}'],\n\n  theme: {\n    extend: {},\n  },\n\n  darkMode: 'class',\n\n  plugins: [],\n}\n\nmodule.exports = config\n```\n\n### Define light / dark background colors\n\nSet the light and dark mode backgrounds to use in your `src/app.html` app shell:\n\n```html\n\u003cbody class=\"bg-slate-100 dark:bg-slate-900\"\u003e\n  \u003cdiv\u003e%sveltekit.body%\u003c/div\u003e\n\u003c/body\u003e\n```\n\nEverything should then be in place to design using the TailWindCSS classes including the `dark:` prefix for when dark mode is active.\n\n\n## Customizing the Widget Style\n\nThe UI widgets can be customized to match whatever TailwindCSS colors scheme you are using, the default icons can be replaced if desired, and the \"Light\", \"Dark\", and \"System\" labels replaced.\n\n### Colors\n\nComing soon\n\n### Icons\n\nComing soon\n\n### Labels\n\nComing soon\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-theme-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaptaincodeman%2Fsvelte-theme-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-theme-select/lists"}