{"id":14962738,"url":"https://github.com/friendofsvelte/toggle","last_synced_at":"2025-07-15T04:37:01.845Z","repository":{"id":211900084,"uuid":"730213416","full_name":"friendofsvelte/toggle","owner":"friendofsvelte","description":"Dark mode toggle for Svelte and SvelteKit","archived":false,"fork":false,"pushed_at":"2025-02-11T10:51:09.000Z","size":295,"stargazers_count":7,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-08T20:51:30.106Z","etag":null,"topics":["dark-theme","svelte","svelte5","sveltekit","tailwindcss","toggle"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@friendofsvelte/toggle","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/friendofsvelte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-12-11T12:51:39.000Z","updated_at":"2025-03-27T06:29:46.000Z","dependencies_parsed_at":"2023-12-13T17:57:41.033Z","dependency_job_id":"22f4c071-003b-48cd-bf04-158b4ea043f2","html_url":"https://github.com/friendofsvelte/toggle","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":"0.11111111111111116","last_synced_commit":"00bcda6d536c8be8b3a776080a7ebcd4a0357ff7"},"previous_names":["friendofsvelte/toggle"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/friendofsvelte/toggle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/friendofsvelte%2Ftoggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/friendofsvelte%2Ftoggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/friendofsvelte%2Ftoggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/friendofsvelte%2Ftoggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/friendofsvelte","download_url":"https://codeload.github.com/friendofsvelte/toggle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/friendofsvelte%2Ftoggle/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265402833,"owners_count":23759237,"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-theme","svelte","svelte5","sveltekit","tailwindcss","toggle"],"created_at":"2024-09-24T13:30:26.618Z","updated_at":"2025-07-15T04:37:01.812Z","avatar_url":"https://github.com/friendofsvelte.png","language":"Svelte","readme":"# Svelte Dark Mode Toggle\n\nA simple dark mode toggle for Svelte and SvelteKit app.\n\n## Features\n\n- In-app toggle between light and dark mode\n- System toggle between light and dark mode\n- Persist user preference in cookies\n- Server-side rendering supported\n- No dependencies\n\n## Installation\n\n```bash\nnpm i @friendofsvelte/toggle\n```\n\n## Usage\n\nIn your `src/+layout.svelte` (recommended) or `+page.svelte` file, add the following code:\n\n```svelte\n\u003cscript\u003e\n    import {ThemeToggle, appearance} from \"@friendofsvelte/toggle\";\n    import \"@friendofsvelte/toggle/styles/Toggle.css\";\n\u003c/script\u003e\n\n\u003cThemeToggle/\u003e\nIs dark mode: {appearance.dark}\n```\n\nIn your `src/hooks.server.ts` file, add the following code:\n\n```ts\nimport {sequence} from \"@sveltejs/kit/hooks\";\nimport {handleAppearance} from \"@friendofsvelte/toggle\";\n\nexport const handle = sequence(\n    handleAppearance\n);\n```\n\nAdd `class=\"%appearanceMode%\"` in your `app.html` file:\n\n```html\n\u003chtml lang=\"en\" class=\"%appearanceMode%\"\u003e\n```\n\nDone 🎉, you can now toggle between light and dark mode.\n\n## Previews\n\n**System toggle**\n![system_mode](https://github.com/friendofsvelte/toggle/assets/42182303/d9a4c7a4-7f84-4f02-b2a7-5010067c07b5)\n\n**In-app toggle**\n![in_app_mode](https://github.com/friendofsvelte/toggle/assets/42182303/6d8f4862-a971-4c7c-b0a9-a5e9c95ddc5f)\n\n## Custom action\n\nYou can also use the `toggle` action to toggle the theme programmatically. Use\nthe follow utility function to achieve this:\n\n```ts\nimport {\n    apperance\n} from \"@friendofsvelte/toggle\";\n````\n\n- `appearance` is a class object that stores `dark` boolean state on it.\n- setting `appearance.dark = false` with automatically update the UI to light mode.\n- `ThemeToggle` is the default component that uses `appearance` to toggle the theme.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n    import {scale} from \"svelte/transition\";\n    import Moon from \"$lib/toggle/icons/Moon.svelte\";\n    import Sun from \"$lib/toggle/icons/Sun.svelte\";\n    import { appearance } from \"@friendofsvelte/toggle\";\n    import TrackAppearance from '@friendofsvelte/toggle';\n\n    let {class: className = ''} = $props();\n\u003c/script\u003e\n\n\u003cTrackAppearance/\u003e\n{#if appearance.dark !== null}\n    \u003cbutton\n            class=\"dark-mode-button {className}\"\n            class:isDarkMode={appearance.dark}\n            in:scale\n            onclick={()=\u003eappearance.dark=!appearance.dark}\u003e\n        {#if appearance.dark}\n            \u003cMoon/\u003e\n        {:else}\n            \u003cSun/\u003e\n        {/if}\n    \u003c/button\u003e\n{:else}\n    \u003cdiv class=\"dark-mode-button\"/\u003e\n{/if}\n```\n\nNow, add the following code in your tailwind `app.css`:\n```css\n@variant dark (\u0026:where(.dark, .dark *));\n```\n\nthis works for Tailwind V4 users.\n\n# About Friend Of Svelte\n\n----------------------\n\n![Friend Of Svelte Logo](https://avatars.githubusercontent.com/u/143795012?s=200\u0026v=4)\n\n[Friend Of Svelte](https://github.com/friendofsvelte) is a community driven project to help Svelte developers to find\nand\ndevelop awesome Svelte resources.\n\nIf you like this project, you can be one of the friend by contributing to the project. Memberships are open for\neveryone.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendofsvelte%2Ftoggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffriendofsvelte%2Ftoggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendofsvelte%2Ftoggle/lists"}