{"id":22621671,"url":"https://github.com/colinaut/theme-multi-switch","last_synced_at":"2025-08-31T10:42:34.006Z","repository":{"id":63593775,"uuid":"569048145","full_name":"colinaut/theme-multi-switch","owner":"colinaut","description":"Theme switch web component which allows multiple themes; defaults to light, auto, dark","archived":false,"fork":false,"pushed_at":"2023-11-11T21:32:42.000Z","size":355,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-25T21:21:38.964Z","etag":null,"topics":["theme-switcher","webcomponent"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/colinaut.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":"2022-11-22T00:55:45.000Z","updated_at":"2025-01-22T18:58:43.000Z","dependencies_parsed_at":"2024-11-16T21:15:21.588Z","dependency_job_id":null,"html_url":"https://github.com/colinaut/theme-multi-switch","commit_stats":{"total_commits":40,"total_committers":1,"mean_commits":40.0,"dds":0.0,"last_synced_commit":"9a364cef41829c6db5136bda3a1eba5b330da511"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/colinaut/theme-multi-switch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinaut%2Ftheme-multi-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinaut%2Ftheme-multi-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinaut%2Ftheme-multi-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinaut%2Ftheme-multi-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colinaut","download_url":"https://codeload.github.com/colinaut/theme-multi-switch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colinaut%2Ftheme-multi-switch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272971422,"owners_count":25024093,"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-31T02:00:09.071Z","response_time":79,"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":["theme-switcher","webcomponent"],"created_at":"2024-12-08T23:11:20.888Z","updated_at":"2025-08-31T10:42:33.963Z","avatar_url":"https://github.com/colinaut.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Theme Multi Switch Web Component\n\nI created this three way switch for setting theme as I couldn't find what I was looking for — most are two way switches and I wanted to allow for auto. So I built a three way switch which defaults to \"auto\" (for browser prefers-color-scheme) and allows \"light\" or \"dark\" for overriding prefers-color-scheme. I quickly realized that I could just as easily make it work with multiple themes!\n\nCheck out the [Demo Page](https://colinaut.github.io/theme-multi-switch/)\n\nWhen switch is triggered it:\n\n*   Adds current theme to data-theme attribute on the html element.\n*   Stores the current theme in localStorage under \"theme\" — _component checks for this on reload to set current theme state_.\n*   Triggers a \"theme-switch\" custom event with the current theme as detail. _This will automatically update any other theme-switch components on the page._\n*   Optionally, updates meta theme-color using the \"meta-color\" prop. _This requires that the meta-colors prop is set and that the meta theme-color is included in your html._\n\nYou can also trigger the switch externally by either changing the \"theme\" prop or dispatching a \"theme-switch\" event with the theme in the detail.\n\nIf desired the theme names can be modified from their defaults via props.\n\n## Installation\n\nAdd the theme-multi-switch.js script to your project. Then add the component `\u003ctheme-switch\u003e\u003c/theme-switch\u003e` to your html.\n\n### CDN\n\n```\n\u003cscript src=\"https://unpkg.com/@colinaut/theme-multi-switch/dist/theme-multi-switch.js\"\u003e\u003c/script\u003e\n```\n\nFor best results, add this to your `\u003chead\u003e` without defer so that it is render blocking. This avoids [Flash of inAccurate coloR Theme (FART)](https://css-tricks.com/flash-of-inaccurate-color-theme-fart/).\n\n### NPM/PNPM/YARN\n\n```\nnpm i @colinaut/theme-multi-switch\n\npnpm i @colinaut/theme-multi-switch\n\nyarn add @colinaut/theme-multi-switch\n\n```\n\n### Eleventy static site\n\nIf you are using [Eleventy](https://www.11ty.dev), and want to install locally rather than rely on the CDN, you can install via NPM/PNPM/YARN and then pass through the js file so that it is included in the output. Then you would just need to add it to the head.\n\n```\neleventyConfig.addPassthroughCopy({\n    \"node_modules/@colinaut/theme-multi-switch/dist/theme-multi-switch.js\": \"js/theme-multi-switch.js\",\n})\n```\n```\n\u003cscript src=\"/js/theme-multi-switch.js\"\u003e\u003c/script\u003e\n```\n\n## Modifying\n\nSizing uses em so it can be resized by changing the css font-size. Base color for text, knob, and track border uses currentColor so it will update if you change the body text color.\n\nFurther restyling is possible via slots, parts, and css variables. Properties allows changing defaults and values for changing meta theme-color.\n\n### Default Slots\n\n*   light\n*   auto\n*   dark\n\n_Slots are dynamically named after the theme names._\n\n### Default Parts\n\n*   light\n*   auto\n*   dark\n*   track\n*   knob\n\n_Label Parts are dynamically named after the theme names._\n\n### CSS Variables\n\n*   \\--theme-switch-knob `background: var(--theme-switch-knob, currentColor);`\n*   \\--theme-switch-track `background: var(--theme-switch-track, #88888822);`\n*   \\--theme-switch-track-border `border: 0.1em solid var(--theme-switch-border, currentColor);`\n*   \\--theme-switch-highlight `color: var(--theme-switch-highlight, inherit);`\n*   \\--theme-switch-knob-width `width: calc(var(--theme-switch-knob-width, 1) * 1em);`\n\n### Properties\n\n*   themes = \"light,auto,dark\"\n*   theme = defaults to themes[1]\n*   meta-colors = \"\"\n*   layout = \"around top\"\n\n_themes and meta-colors accepts either a comma separated string or a stringified JSON array_\n\n_layout can be either \"around top\", \"around bottom\", or just \"top\" or \"bottom\"_\n\n## Example Auto/Light/Dark CSS\n\n```\n/\\* Values for light and dark \\*/\n\n:root {\n    --header-light: rgb(95, 0, 0);\n    --body-light: rgb(45, 45, 65);\n    --bg-light: rgb(225, 225, 225);\n    --track-light: rgb(205 195 165 /0.8);\n    --highlight-light: rgb(155, 50, 0);\n\n    --header-dark: rgb(250, 180, 120);\n    --body-dark: rgb(225, 225, 225);\n    --bg-dark: rgb(45, 45, 65);\n    --track-dark: rgb(105 85 55 /0.6);\n    --highlight-dark: rgb(225, 120, 100);\n}\n\n/\\* Automatic Light Mode; Light Mode Override \\*/\n\n:root,\n[data-theme=\"light\"] {\n    --header: var(--header-light);\n    --body: var(--body-light);\n    --bg: var(--bg-light);\n    --theme-switch-track: var(--track-light);\n    --theme-switch-highlight: var(--highlight-light);\n}\n\n/\\* Dark Mode Override \\*/\n\n[data-theme=\"dark\"] {\n    --header: var(--header-dark);\n    --body: var(--body-dark);\n    --bg: var(--bg-dark);\n    --theme-switch-track: var(--track-dark);\n    --theme-switch-highlight: var(--highlight-dark);\n}\n\n/\\* Automatic Dark Mode \\*/\n\n@media (prefers-color-scheme: dark) {\n    :root {\n        --header: var(--header-dark);\n        --body: var(--body-dark);\n        --bg: var(--bg-dark);\n        --theme-switch-track: var(--track-dark);\n        --theme-switch-highlight: var(--highlight-dark);\n    }\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolinaut%2Ftheme-multi-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolinaut%2Ftheme-multi-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolinaut%2Ftheme-multi-switch/lists"}