{"id":15382420,"url":"https://github.com/h0rn0chse/dark-mode-toggle","last_synced_at":"2025-04-15T19:28:50.227Z","repository":{"id":57114754,"uuid":"372053027","full_name":"H0rn0chse/dark-mode-toggle","owner":"H0rn0chse","description":"An animated toggle button for switching dark mode themes as WebComponent","archived":false,"fork":false,"pushed_at":"2023-07-17T15:09:13.000Z","size":657,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T00:05:25.876Z","etag":null,"topics":["animation","button","dark","dark-mode-toggle","darkmode","light","local","mode","storage","theme","toggle","webcomponent"],"latest_commit_sha":null,"homepage":"https://h0rn0chse.github.io/dark-mode-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/H0rn0chse.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2021-05-29T19:16:51.000Z","updated_at":"2025-03-26T09:38:18.000Z","dependencies_parsed_at":"2023-09-23T17:12:03.005Z","dependency_job_id":"7b3711d1-b593-4852-97da-7db95a28fd4e","html_url":"https://github.com/H0rn0chse/dark-mode-toggle","commit_stats":{"total_commits":79,"total_committers":3,"mean_commits":"26.333333333333332","dds":0.240506329113924,"last_synced_commit":"cf3d317fb570fc5bbb2a2ab19ea8b433ded430d4"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H0rn0chse%2Fdark-mode-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H0rn0chse%2Fdark-mode-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H0rn0chse%2Fdark-mode-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H0rn0chse%2Fdark-mode-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/H0rn0chse","download_url":"https://codeload.github.com/H0rn0chse/dark-mode-toggle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249137906,"owners_count":21218800,"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":["animation","button","dark","dark-mode-toggle","darkmode","light","local","mode","storage","theme","toggle","webcomponent"],"created_at":"2024-10-01T14:31:59.248Z","updated_at":"2025-04-15T19:28:50.209Z","avatar_url":"https://github.com/H0rn0chse.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dark Mode Toggle\nA simple toggle button, which can be used in any context. It's built as WebComponent and available as [npm package](https://www.npmjs.com/package/@h0rn0chse/dark-mode-toggle).\n\nThe animation data is from [cawfree/react-dark-mode-toggle](https://github.com/cawfree/react-dark-mode-toggle), which only supports react. This project shall allow the usage of the nice animations in non-react enviroments. It also supports a very basic implementation for changing dark/ light themes.\n\n\u003cbr\u003e\n\n\u003cimg src=\"./assets/screenshot.png\" title=\"Screenshot\" /\u003e\n\n## Usage\nPlease checkout the [demo](https://h0rn0chse.github.io/dark-mode-toggle). You can add the resources either locally, via a CDN or as [npm package](https://www.npmjs.com/package/@h0rn0chse/dark-mode-toggle):\n```html\n\u003c!-- @h0rn0chse/dark-mode-toggle dependency --\u003e\n\u003cscript src=\"https://unpkg.com/lottie-web@5.7/build/player/lottie.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript src=\"https://unpkg.com/@h0rn0chse/dark-mode-toggle@2/dist/bundle.min.js\"\u003e\u003c/script\u003e\n\n\u003c!--The css is only required when the button is NOT used as WebComponent--\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@h0rn0chse/dark-mode-toggle@2/dist/bundle.min.css\"\u003e\n```\n\nYou can either add a Button as WebComponent\n```html\n\u003cdark-mode-toggle\n    id=\"toggle\"\n    width=\"320\"\n/\u003e\n```\nor via a scrict dynamically:\n```javascript\nconst { Button, ThemeHandler } = globalThis.darkModeToggle;\n\nconst button = new Button(document.querySelector(\"#container\"), { width: 320 });\n```\n\n# Documentation\n\n## new Button(container, options)\nCreates a new Button and places it into the provided container.\n### option.width (default: 320)\nThe width of the button in pixels. Be aware that `options.height` will be preferred over `options.width` to keep the button`s aspect ratio.\n\n### option.height\nThe height of the button in pixels. Be aware that `options.height` will be preferred over `options.width` to keep the button`s aspect ratio.\n\n### option.useThemeHandler (default: true)\nA boolean wether to use the themeHandler and its logic. Be aware that once a button was created using the themeHandler it's not possible to remove the themeHandler.\n\n### option.theme\nA enum which can be either `dark` or `light`. Defines the initial state of the button. You might use this option when you are using your own theme handler.\n\n### Button.setWidth(width)\nSets the width of the button. The `width` is required to be provided as number (of pixels). Keeps the aspect ratio of the button.\n\n### Button.setHeight(height)\nSets the height of the button. The `height` is required to be provided as number (of pixels). Keeps the aspect ratio of the button.\n\n### Button.setTheme(theme, skipAnimation=false)\nSets the theme of the button by toggling the button to the desired state. Valid values for `theme` are `dark` and `light`. You can skip the animation by setting `skipAnimation` to `true`.\n\n## Button Events\nPlease look for [Events](#events) on details how to register and deregister to events.\n\n### click\nGets emitted once the button was clicked. Provides the upcoming theme via the eventData as parameter `theme`.\n\n### animationStart\nGets emitted once the button starts an animation. This might also abort the previous animation. Provides the upcoming theme via the eventData as parameter `theme`.\n\n### animationComplete\nGets emitted once the button completes an animation. This will not be called on aborted animations. Provides the final theme via the eventData as parameter `theme`.\n\n## ThemeHandler\nHandles the `dark` and `light` theming. The application is required to load both themes as separate css files. These css nodes are required to have the `id=\"dark\"` and `\"light\"`. The ThemeHandler swaps those files according to the current theme.\n\n### ThemeHandler.setTheme(theme)\nSets the current Theme which can be either `dark` or `light`.\n\n### ThemeHandler.getTheme()\nReturns the current Theme which is either `dark` or `light`.\n\n## ThemeHandler Events\nPlease look for [Events](#events) on details how to register and deregister to events.\n\n### themeChanged\nGets emitted once the theme was changed either via system preferences, via setTheme or via the ToggleButton. Provides the new theme via the eventData as parameter `theme`. Be aware that the theme was not loaded yet.\n\n### themeLoaded\nGets emitted once the loading of the theme was completed. Provides the new theme via the eventData as parameter `theme`.\n\n## Events\nThe `ThemeHandler` and the `Button` implement Events via the EventProvider. These events aren't native and get called synchronously after the event was emitted. Therefore it's also necessary to remove the handlers again to avoid memory leaks.\n\n### EventProvider.on(name, callback, [scope])\nSubscribes to an event. Please be aware that a handler cannot be subscribed multiple times for the same scope.\n### EventProvider.once(name, callback, [scope])\nSubscribes once to an event. Please be aware that a handler which was already attached to an event via `EventProvider.on` cannot be attached via `EventProvider.once`.\n\n### EventProvider.off(name, callback, [scope])\nRemoves the subscription to an event. This method also works for handlers attached via `EventProvider.once` and which were not triggered yet.\n\n## WebComponent\n\nThe WebComponent accepts all the options the [Button](#new-buttoncontainer-options) provides. It also provides the API of the [EventProivder](#events) and the [Button](#new-buttoncontainer-options). The WebComponent reacts dynamically on `width`, `height` and `theme`. Simliar to the options you cannot simultaneously set `width` and `height`.\n\n## Libraries\n * AnimationData [cawfree/react-dark-mode-toggle](https://github.com/cawfree/react-dark-mode-toggle)\n * Player [LottieFiles/lottie-web](https://github.com/LottieFiles/lottie-web)\n * Feather Icons [github.com/feathericons/feather](https://github.com/feathericons/feather)\n * Github Corners [github.com/YuskaWu/github-corner-element](https://github.com/YuskaWu/github-corner-element)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh0rn0chse%2Fdark-mode-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fh0rn0chse%2Fdark-mode-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh0rn0chse%2Fdark-mode-toggle/lists"}