{"id":16791959,"url":"https://github.com/metonym/svelte-dark-mode","last_synced_at":"2025-03-17T03:30:43.089Z","repository":{"id":37000976,"uuid":"257741695","full_name":"metonym/svelte-dark-mode","owner":"metonym","description":"Support dark mode in your Svelte apps","archived":false,"fork":false,"pushed_at":"2023-07-19T17:45:44.000Z","size":500,"stargazers_count":42,"open_issues_count":9,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-27T17:16:45.834Z","etag":null,"topics":["color-scheme-preference","dark-mode","localstorage","persist","prefers-color-scheme","ssr","svelte","svelte-component","theme","typescript","typescript-definitions"],"latest_commit_sha":null,"homepage":"https://metonym.github.io/svelte-dark-mode","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/metonym.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-04-21T23:41:13.000Z","updated_at":"2024-03-01T20:19:34.000Z","dependencies_parsed_at":"2024-10-27T11:56:08.271Z","dependency_job_id":"f6091adc-83e3-4667-a0e8-57aa93e4d1a9","html_url":"https://github.com/metonym/svelte-dark-mode","commit_stats":{"total_commits":63,"total_committers":2,"mean_commits":31.5,"dds":0.06349206349206349,"last_synced_commit":"39308522a004ba1566ae87fa358825e723017712"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metonym","download_url":"https://codeload.github.com/metonym/svelte-dark-mode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841204,"owners_count":20356441,"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":["color-scheme-preference","dark-mode","localstorage","persist","prefers-color-scheme","ssr","svelte","svelte-component","theme","typescript","typescript-definitions"],"created_at":"2024-10-13T08:43:40.388Z","updated_at":"2025-03-17T03:30:42.771Z","avatar_url":"https://github.com/metonym.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-dark-mode\n\n[![NPM][npm]][npm-url]\n\n\u003e Support dark mode in your Svelte apps.\n\n\u003c!-- REPO_URL --\u003e\n\nThis component sets the theme based on the user’s preferred color scheme using [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).\n\nThe preferred theme is persisted using the [window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).\n\n---\n\n\u003c!-- TOC --\u003e\n\n## Installation\n\n```bash\n# Yarn\nyarn add -D svelte-dark-mode\n\n# npm\nnpm i -D svelte-dark-mode\n\n# pnpm\npnpm i -D svelte-dark-mode\n```\n\n## Usage\n\n### Basic\n\nThe `theme` is set to either `\"dark\"` or `\"light\"` based on the user’s system preference.\n\n```svelte\n\u003cscript\u003e\n  import DarkMode from \"svelte-dark-mode\";\n\n  let theme;\n\n  $: switchTheme = theme === \"dark\" ? \"light\" : \"dark\";\n  $: document.body.className = theme;\n\u003c/script\u003e\n\n\u003cDarkMode bind:theme /\u003e\n\n\u003ch1\u003eThis is {theme} mode.\u003c/h1\u003e\n\u003cp\u003eChange the theme and reload the page.\u003c/p\u003e\n\n\u003cbutton on:click={() =\u003e (theme = switchTheme)}\u003e\n  Switch to {switchTheme} mode\n\u003c/button\u003e\n\n\u003cstyle\u003e\n  :global(.dark) {\n    background: #032f62;\n    color: #f1f8ff;\n  }\n\u003c/style\u003e\n```\n\n### Server-side rendering (SSR)\n\nWhen using server-side rendering (SSR), employ the `afterUpdate` lifecycle to access `document.body` or `document.documentElement`.\n\n```svelte no-eval\n\u003cscript\u003e\n  import DarkMode from \"svelte-dark-mode\";\n  import { afterUpdate } from \"svelte\";\n\n  let theme;\n\n  afterUpdate(() =\u003e {\n    document.body.className = theme; // \"dark\" or \"light\"\n  });\n\u003c/script\u003e\n\n\u003cDarkMode bind:theme /\u003e\n```\n\nAn alternative to the `afterUpdate` lifecycle hook is to check if the type of `window` is undefined.\n\n```js no-eval\n$: if (typeof window !== \"undefined\") {\n  document.body.className = theme;\n}\n```\n\n### System preference change\n\nThe theme will automatically be updated if the user changes their color scheme preference at the system level.\n\n### Custom `localStorage` key\n\nUse the `key` prop to customize the local storage key used to track the persisted theme.\n\nBy default, the key is `\"theme\"`.\n\n```svelte no-eval\n\u003cDarkMode key=\"custom-theme-key\" /\u003e\n```\n\nUse the `localStorage.getItem` API to programmatically access the stored value.\n\n```js\nlocalStorage.getItem(\"custom-theme-key\"); // \"dark\" || \"light\"\n```\n\n## API\n\n### Props\n\n| Name  | Type                  | Default value |\n| :---- | :-------------------- | :------------ |\n| theme | `\"dark\"` or `\"light\"` | `\"dark\"`      |\n| key   | `string`              | `\"theme\"`     |\n\n### Dispatched events\n\n- **on:change**: dispatched when `theme` is updated\n\n```svelte no-eval\n\u003cDarkMode\n  on:change={(e) =\u003e {\n    console.log(e.detail); // \"dark\" | \"light\"\n  }}\n/\u003e\n```\n\n## Changelog\n\n[CHANGELOG.md](CHANGELOG.md)\n\n## License\n\n[MIT](LICENSE)\n\n[npm]: https://img.shields.io/npm/v/svelte-dark-mode.svg?color=%23ff3e00\u0026style=for-the-badge\n[npm-url]: https://npmjs.com/package/svelte-dark-mode\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetonym%2Fsvelte-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-dark-mode/lists"}