{"id":14990151,"url":"https://github.com/cdransf/theme-toggle","last_synced_at":"2025-04-12T02:05:44.414Z","repository":{"id":224966231,"uuid":"764745173","full_name":"cdransf/theme-toggle","owner":"cdransf","description":"A web component that simplifies controlling light/dark theming for a site.","archived":false,"fork":false,"pushed_at":"2024-10-31T00:03:22.000Z","size":25,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T02:05:32.783Z","etag":null,"topics":["javascript","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@cdransf/theme-toggle","language":"JavaScript","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/cdransf.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":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"cory","custom":null}},"created_at":"2024-02-28T16:26:10.000Z","updated_at":"2024-12-16T09:54:53.000Z","dependencies_parsed_at":"2024-04-19T00:47:37.529Z","dependency_job_id":null,"html_url":"https://github.com/cdransf/theme-toggle","commit_stats":null,"previous_names":["cdransf/theme-toggle"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdransf%2Ftheme-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdransf%2Ftheme-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdransf%2Ftheme-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdransf%2Ftheme-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdransf","download_url":"https://codeload.github.com/cdransf/theme-toggle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505863,"owners_count":21115354,"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":["javascript","webcomponent","webcomponents"],"created_at":"2024-09-24T14:19:35.171Z","updated_at":"2025-04-12T02:05:44.394Z","avatar_url":"https://github.com/cdransf.png","language":"JavaScript","readme":"# `\u003ctheme-toggle\u003e` web component\n\nA web component that simplifies controlling light/dark theming for a site.\n\n```sh\nnpm i @cdransf/theme-toggle\n```\n\n---\n\n## Example usage\n\nAdd the `theme-load.js` to your document `\u003cbody\u003e` to prevent an unthemed flash on load. This ensures access to the `document`.\n\n```html\n\u003cbody\u003e\n  \u003cscript type=\"module\" src=\"/scripts/theme-load.js\"\u003e\u003c/script\u003e\n   \u003ctheme-toggle\u003e\n      \u003cbutton aria-label=\"Light and dark theme toggle\" class=\"theme-toggle\"\u003e\n        \u003cspan class=\"light\"\u003e\u003c/span\u003e\n        \u003cspan class=\"dark\"\u003e\u003c/span\u003e\n      \u003c/button\u003e\n    \u003c/theme-toggle\u003e\n\u003c/body\u003e\n```\n\n**Optional attributes:**\n\n- **mode:** accepts either `control` or `toggle` and defaults to `toggle`. If `toggle` is set, you can add `\u003cspan class=\"auto\"\u003e\u003c/span\u003e` and allow the user to cycle back to their system preference.\n- **storage:** sets the storage API to be used. Defaults to `sessionStorage`, but can also be set to \"`local` for `localStorage`.\n\n- Add the `theme-toggle.js` to your markup, set your template.\n- Add `\u003cmeta name=\"color-scheme\" content=\"light dark\"\u003e` to your site's header.\n- Use `light-dark` to define your preferred colors for each scheme.\n\n[Refer to MDN for documentation on CSS light-dark().](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)","funding_links":["https://buymeacoffee.com/cory"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdransf%2Ftheme-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdransf%2Ftheme-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdransf%2Ftheme-toggle/lists"}