{"id":25803541,"url":"https://github.com/lixelv/theme-selector","last_synced_at":"2026-01-03T13:06:26.835Z","repository":{"id":255445469,"uuid":"852340356","full_name":"lixelv/theme-selector","owner":"lixelv","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-04T16:43:40.000Z","size":50,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T20:52:06.227Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/lixelv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2024-09-04T16:31:08.000Z","updated_at":"2024-09-04T16:43:43.000Z","dependencies_parsed_at":"2024-09-05T22:19:19.949Z","dependency_job_id":null,"html_url":"https://github.com/lixelv/theme-selector","commit_stats":null,"previous_names":["lixelv/theme-selector"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lixelv%2Ftheme-selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lixelv%2Ftheme-selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lixelv%2Ftheme-selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lixelv%2Ftheme-selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lixelv","download_url":"https://codeload.github.com/lixelv/theme-selector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241041031,"owners_count":19898973,"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":[],"created_at":"2025-02-27T17:56:18.185Z","updated_at":"2026-01-03T13:06:26.770Z","avatar_url":"https://github.com/lixelv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# theme-selector\n\nA simple Svelte store library that lets you switch between light and dark themes, with support for system theme by default.\n\n## Installation\n\nInstall the package via npm:\n\n```bash\nnpm i theme-selector\n```\n\n### (Optional) Instant Theme Switch\n\nTo ensure the theme is applied instantly on page load (before Svelte mounts), you can add this script to the `\u003chead\u003e` section of your `app.html`. This is especially useful if you're using libraries like ShadCN:\n\n```html\n\u003cscript\u003e\n\tconst theme = localStorage.getItem('theme');\n\tlet currentTheme;\n\n\tif (theme === 'system' || !theme) {\n\t\tcurrentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n\t} else {\n\t\tcurrentTheme = theme;\n\t}\n\n\tif (currentTheme === 'dark') {\n\t\tdocument.documentElement.classList.add('dark');\n\t} else {\n\t\tdocument.documentElement.classList.remove('dark');\n\t}\n\n\tif (!theme) {\n\t\tlocalStorage.setItem('theme', 'system');\n\t}\n\u003c/script\u003e\n```\n\n## Usage\n\nImport the `theme` store and use it in your components:\n\n```svelte\n\u003cscript\u003e\n\timport { theme } from 'theme-selector';\n\u003c/script\u003e\n\n\u003c!-- $theme reflects the current theme ('light' or 'dark'). \nThe set method accepts 'light', 'dark', or 'system'. --\u003e\n\u003ch1\u003eYour current theme is {$theme}\u003c/h1\u003e\n\n\u003cbutton on:click={() =\u003e theme.set('dark')}\u003eDark\u003c/button\u003e\n\u003cbutton on:click={() =\u003e theme.set('light')}\u003eLight\u003c/button\u003e\n\u003cbutton on:click={() =\u003e theme.set('system')}\u003eSystem\u003c/button\u003e\n```\n\n### Custom Theme Store\n\nYou can create a new theme store using the `createThemeStore` function. This allows you to specify a callback function that will be invoked whenever the theme changes (either by system preferences or user selection):\n\n```svelte\n\u003cscript\u003e\n\timport { createThemeStore } from 'theme-selector';\n\n\tfunction onThemeChange(theme) {\n\t\tconsole.log('Theme changed to:', theme);\n\t}\n\n\tconst theme = createThemeStore(onThemeChange);\n\u003c/script\u003e\n\n\u003cp\u003eThe current theme is: {$theme}\u003c/p\u003e\n```\n\n### Default Behavior with ShadCN\n\nBy default, if no callback function is provided to `createThemeStore`, it will automatically update the `html` class to reflect the current theme.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flixelv%2Ftheme-selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flixelv%2Ftheme-selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flixelv%2Ftheme-selector/lists"}