{"id":16226281,"url":"https://github.com/ghostdevv/svelte-kit-theme-switcher-demo","last_synced_at":"2025-08-02T13:40:53.137Z","repository":{"id":174559840,"uuid":"652401889","full_name":"ghostdevv/svelte-kit-theme-switcher-demo","owner":"ghostdevv","description":null,"archived":false,"fork":false,"pushed_at":"2023-10-07T22:20:03.000Z","size":35,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-12T23:42:09.928Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ghostdevv.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,"zenodo":null}},"created_at":"2023-06-12T02:08:36.000Z","updated_at":"2023-06-12T10:03:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"b5ac83a2-b0da-4964-a216-82c26a7f979a","html_url":"https://github.com/ghostdevv/svelte-kit-theme-switcher-demo","commit_stats":null,"previous_names":["ghostdevv/svelte-kit-theme-switcher-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ghostdevv/svelte-kit-theme-switcher-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostdevv%2Fsvelte-kit-theme-switcher-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostdevv%2Fsvelte-kit-theme-switcher-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostdevv%2Fsvelte-kit-theme-switcher-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostdevv%2Fsvelte-kit-theme-switcher-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghostdevv","download_url":"https://codeload.github.com/ghostdevv/svelte-kit-theme-switcher-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostdevv%2Fsvelte-kit-theme-switcher-demo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268400668,"owners_count":24244445,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10-10T12:48:38.824Z","updated_at":"2025-08-02T13:40:53.114Z","avatar_url":"https://github.com/ghostdevv.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Kit Theme Switcher Demo\n\nSimple theme switcher demo for svelte kit, supports SSR. Run this repo locally to play around with it, or setup using the files below.\n\n## lib/themes.ts\n\n```ts\nexport type Theme = 'light' | 'dark' | undefined;\n\nexport function getDefaultTheme(): Theme {\n\tconst { matches } = window.matchMedia('(prefers-color-scheme: dark)');\n\treturn matches ? 'dark' : 'light';\n}\n\nexport function isValidTheme(string: any): string is Theme {\n\treturn ['light', 'dark', undefined].includes(string);\n}\n```\n\n## lib/ThemeSwitcher.svelte\n\n```html\n\u003cscript lang=\"ts\"\u003e\n\timport { getDefaultTheme } from '$lib/themes';\n\timport { page } from '$app/stores';\n\timport cookies from 'js-cookie';\n\n\tfunction changeTheme(event: { currentTarget: HTMLSelectElement }) {\n\t\tconst theme = event.currentTarget.value;\n\n\t\tif (theme) {\n\t\t\tcookies.set('theme', theme, { path: '/' });\n\t\t\tdocument.documentElement.dataset.theme = theme;\n\t\t} else {\n\t\t\tcookies.remove('theme', { path: '/' });\n\t\t\tdocument.documentElement.dataset.theme = getDefaultTheme();\n\t\t}\n\t}\n\u003c/script\u003e\n\n\u003cselect on:input={changeTheme}\u003e\n\t\u003coption selected={$page.data.theme == undefined} value={undefined}\u003eAuto\u003c/option\u003e\n\t\u003coption selected={$page.data.theme == 'light'} value=\"light\"\u003eLight\u003c/option\u003e\n\t\u003coption selected={$page.data.theme == 'dark'} value=\"dark\"\u003eDark\u003c/option\u003e\n\u003c/select\u003e\n```\n\n## hooks.server.ts\n\n```ts\nimport { isValidTheme } from '$lib/themes';\n\nexport async function handle({ event, resolve }) {\n\tconst cookieTheme = event.cookies.get('theme');\n\n\tevent.locals.theme = isValidTheme(cookieTheme) ? cookieTheme : undefined;\n\n\treturn await resolve(event, {\n\t\ttransformPageChunk({ html }) {\n\t\t\tif (event.locals.theme) {\n\t\t\t\thtml = html.replace('%sveltekit.theme%', event.locals.theme);\n\t\t\t}\n\n\t\t\treturn html;\n\t\t},\n\t});\n}\n```\n\n## +layout.server.ts\n\n```ts\nexport async function load({ locals }) {\n\treturn {\n\t\ttheme: locals.theme,\n\t};\n}\n```\n\n## app.d.ts\n\n```ts\nimport type { Theme } from '$lib/themes';\n\ndeclare global {\n\tnamespace App {\n\t\tinterface Locals {\n\t\t\ttheme: Theme;\n\t\t}\n\t}\n}\n\nexport {};\n```\n\n## app.html\n\nAdd `data-theme=\"%sveltekit.theme%\"` to your `\u003chtml\u003e` tag.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghostdevv%2Fsvelte-kit-theme-switcher-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghostdevv%2Fsvelte-kit-theme-switcher-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghostdevv%2Fsvelte-kit-theme-switcher-demo/lists"}