{"id":13683191,"url":"https://github.com/svecosystem/mode-watcher","last_synced_at":"2025-10-06T04:45:25.917Z","repository":{"id":202977542,"uuid":"708506708","full_name":"svecosystem/mode-watcher","owner":"svecosystem","description":"Simple light/dark mode management for SvelteKit apps. 🌑 ←→ ☀️","archived":false,"fork":false,"pushed_at":"2024-04-19T21:26:05.000Z","size":2142,"stargazers_count":201,"open_issues_count":2,"forks_count":6,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-05-02T04:17:50.371Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mode-watcher.svecosystem.com","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/svecosystem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["huntabyte"],"patreon":null,"open_collective":null,"ko_fi":"ollema","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2023-10-22T18:56:39.000Z","updated_at":"2024-06-17T17:37:03.980Z","dependencies_parsed_at":"2023-11-23T17:29:27.789Z","dependency_job_id":"e5e19d4c-9de4-4c55-8458-e5b4cc5b1b06","html_url":"https://github.com/svecosystem/mode-watcher","commit_stats":null,"previous_names":["huntabyte/mode-watcher","svecosystem/mode-watcher"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fmode-watcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fmode-watcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fmode-watcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svecosystem%2Fmode-watcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svecosystem","download_url":"https://codeload.github.com/svecosystem/mode-watcher/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135144,"owners_count":20889421,"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":"2024-08-02T13:02:03.551Z","updated_at":"2025-10-06T04:45:25.889Z","avatar_url":"https://github.com/svecosystem.png","language":"Svelte","funding_links":["https://github.com/sponsors/huntabyte","https://ko-fi.com/ollema"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Mode Watcher\n\nSimple utilities to manage light \u0026 dark mode in your SvelteKit app.\n\n\u003c!-- automd:badges license name=\"mode-watcher\" color=\"yellow\" github=\"svecosystem/mode-watcher\" --\u003e\n\n[![npm version](https://flat.badgen.net/npm/v/mode-watcher?color=yellow)](https://npmjs.com/package/mode-watcher)\n[![npm downloads](https://flat.badgen.net/npm/dm/mode-watcher?color=yellow)](https://npmjs.com/package/mode-watcher)\n[![license](https://flat.badgen.net/github/license/svecosystem/mode-watcher?color=yellow)](https://github.com/svecosystem/mode-watcher/blob/main/LICENSE)\n\n\u003c!-- /automd --\u003e\n\n[![](https://dcbadge.vercel.app/api/server/fdXy3Sk8Gq?style=flat)](https://discord.gg/fdXy3Sk8Gq)\n\n## Installation\n\n```bash\nnpm install mode-watcher\n```\n\n## Usage\n\nAdd the `ModeWatcher` component to your root `+layout.svelte` file.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { ModeWatcher } from \"mode-watcher\";\n\tlet { children } = $props();\n\u003c/script\u003e\n\n\u003cModeWatcher /\u003e\n{@render children()}\n```\n\nThe `ModeWatcher` component will automatically detect the user's preferences and apply/remove the `\"dark\"` class, along with the corresponding `color-scheme` style attribute to the `html` element.\n\n`ModeWatcher` will automatically track operating system preferences and apply these if no user preference is set. If you wish to disable this behavior, set the `track` prop to `false`:\n\n```svelte\n\u003cModeWatcher track={false} /\u003e\n```\n\n`ModeWatcher` can also be configured with a default mode instead of automatically detecting the user's preference.\n\nTo set a default mode, use the `defaultMode` prop:\n\n```svelte\n\u003cModeWatcher defaultMode={\"dark\"}\u003e\n```\n\n`ModeWatcher` can manage the `theme-color` meta tag for you.\n\nTo enable this, set the `themeColors` prop to your preferred colors:\n\n```svelte\n\u003cModeWatcher themeColors={{ dark: \"black\", light: \"white\" }}\u003e\n```\n\n## API\n\n### toggleMode\n\nA function that toggles the current mode.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { toggleMode } from \"mode-watcher\";\n\u003c/script\u003e\n\n\u003cbutton onclick={toggleMode}\u003eToggle Mode\u003c/button\u003e\n```\n\n### setMode\n\nA function that sets the current mode. It accepts a string with the value `\"light\"`, `\"dark\"` or `\"system\"`.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { setMode } from \"mode-watcher\";\n\u003c/script\u003e\n\n\u003cbutton onclick={() =\u003e setMode(\"light\")}\u003eSet Light Mode\u003c/button\u003e\n\u003cbutton onclick={() =\u003e setMode(\"dark\")}\u003eSet Dark Mode\u003c/button\u003e\n```\n\n### resetMode\n\nA function that resets the mode to system preferences.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { resetMode } from \"mode-watcher\";\n\u003c/script\u003e\n\n\u003cbutton onclick={resetMode}\u003eSystem\u003c/button\u003e\n```\n\n### mode\n\nA readable store that contains the current mode. It can be `\"light\"` or `\"dark\"` or `undefined` if evaluated on the server.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { setMode, mode } from \"mode-watcher\";\n\n\tfunction handleModeChange() {\n\t\tif (mode.current === \"light\") {\n\t\t\tsetMode(\"dark\");\n\t\t} else {\n\t\t\tsetMode(\"light\");\n\t\t}\n\t}\n\u003c/script\u003e\n\n\u003cbutton onclick={handleModeChange}\u003e{mode.current}\u003c/button\u003e\n```\n\n### userPrefersMode\n\nA writeable store that represents the user's mode preference. It can be `\"light\"`, `\"dark\"` or `\"system\"`.\n\n### systemPrefersMode\n\nA readable store that represents the operating system's mode preference. It can be `\"light\"`, `\"dark\"` or `undefined` if evaluated on the server. Will automatically track changes to the operating system's mode preference unless this is disabled with the `tracking()` method which takes a boolean. Normally this is disabled by setting the `track` prop to false in the `\u003cModeWatcher\u003e` component.\n\n## Demo / Reproduction Template\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/svecosystem/mode-watcher-reproduction)\n\n## Sponsors\n\nThis project is supported by the following beautiful people/organizations:\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/huntabyte\"\u003e\n    \u003cimg src='https://github.com/huntabyte/static/blob/main/sponsors.svg?raw=true' alt=\"Logos from Sponsors\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n\u003c!-- automd:contributors license=MIT author=\"huntabyte\" github=\"svecosystem/mode-watcher\" --\u003e\n\nPublished under the [MIT](https://github.com/svecosystem/mode-watcher/blob/main/LICENSE) license.\nMade by [@huntabyte](https://github.com/huntabyte), [@ollema](https://github.com/ollema), and [community](https://github.com/svecosystem/mode-watcher/graphs/contributors) 💛\n\u003cbr\u003e\u003cbr\u003e\n\u003ca href=\"https://github.com/svecosystem/mode-watcher/graphs/contributors\"\u003e\n\u003cimg src=\"https://contrib.rocks/image?repo=svecosystem/mode-watcher\" /\u003e\n\u003c/a\u003e\n\n\u003c!-- /automd --\u003e\n\n## Community\n\nJoin the Discord server to ask questions, find collaborators, or just say hi!\n\n\u003ca href=\"https://discord.gg/fdXy3Sk8Gq\" alt=\"Svecosystem Discord community\"\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://invidget.switchblade.xyz/fdXy3Sk8Gq\"\u003e\n  \u003cimg alt=\"Svecosystem Discord community\" src=\"https://invidget.switchblade.xyz/fdXy3Sk8Gq?theme=light\"\u003e\n\u003c/picture\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvecosystem%2Fmode-watcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvecosystem%2Fmode-watcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvecosystem%2Fmode-watcher/lists"}