{"id":13805247,"url":"https://github.com/mahozad/theme-switch","last_synced_at":"2025-04-12T09:41:24.557Z","repository":{"id":57127322,"uuid":"463612134","full_name":"mahozad/theme-switch","owner":"mahozad","description":"A toggle button to switch between light/dark/system theme on the Web.","archived":false,"fork":false,"pushed_at":"2024-03-14T07:10:29.000Z","size":700,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T04:41:18.452Z","etag":null,"topics":["custom-element","dark","dark-mode","dark-theme","theme-switch","theme-toggle","web-component"],"latest_commit_sha":null,"homepage":"https://mahozad.ir/theme-switch/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mahozad.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-25T17:02:49.000Z","updated_at":"2025-02-25T08:52:25.000Z","dependencies_parsed_at":"2024-05-03T10:00:34.640Z","dependency_job_id":"5d97b967-0ee5-44cd-ae9a-4782779dd74c","html_url":"https://github.com/mahozad/theme-switch","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahozad%2Ftheme-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahozad%2Ftheme-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahozad%2Ftheme-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahozad%2Ftheme-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mahozad","download_url":"https://codeload.github.com/mahozad/theme-switch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248549210,"owners_count":21122848,"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":["custom-element","dark","dark-mode","dark-theme","theme-switch","theme-toggle","web-component"],"created_at":"2024-08-04T01:00:59.101Z","updated_at":"2025-04-12T09:41:24.514Z","avatar_url":"https://github.com/mahozad.png","language":"JavaScript","readme":"[![Codecov](https://img.shields.io/codecov/c/gh/mahozad/theme-switch?label=Coverage\u0026logo=codecov\u0026logoColor=%23FF56C0\u0026token=C4P4I1TQTF)](https://codecov.io/gh/mahozad/theme-switch)\n[![Minified size](https://img.shields.io/github/size/mahozad/theme-switch/dist/theme-switch.min.js?label=Minified%20size)](https://unpkg.com/@mahozad/theme-switch)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-9351dc.svg)](https://www.webcomponents.org/element/@mahozad/theme-switch)\n\n\u003cdiv align=\"center\"\u003e\n\n![Demo](https://raw.githubusercontent.com/mahozad/theme-switch/main/demo/demo.png)\n\n\u003c/div\u003e\n\n# HTML light/dark/system theme switch button\n\nThis is an animated [custom HTML element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\nwhich toggles between light theme, dark theme, and automatic theme (OS theme).\nIt adds a custom attribute (`data-theme`) to the `html` element of your page.\nYou can style your page the way you like based on the value of that attribute.\n\nSee the [demo page](https://mahozad.ir/theme-switch/) and scroll below for an [example](#styling-a-page-based-on-the-theme).\n\n## Installing and using the library\n\n  - ### Regular HTML pages\n    ```html\n    \u003cscript src=\"https://unpkg.com/@mahozad/theme-switch\"\u003e\u003c/script\u003e\n    ```\n  - ### Node.js and npm\n    ```shell\n    npm install --save @mahozad/theme-switch\n    ```\n    ```html\n    \u003cscript src=\"node_modules/@mahozad/theme-switch/dist/theme-switch.min.js\"\u003e\u003c/script\u003e\n    ```\n\n  - ### Angular and more\n    For Angular framework and more details about the above installation methods see the [wiki](https://github.com/mahozad/theme-switch/wiki).\n\nAfter installing the library, use the element like this (make sure to include the end tag):\n\n```html\n\u003ctheme-switch\u003e\u003c/theme-switch\u003e\n```\n\n## Styling the switch element\n\nA custom element is no different from the built-in elements of HTML.  \nUse and style it however you want just like you would use and style a regular element:\n\n```css\ntheme-switch {\n  width: 64px;\n  padding: 8px;\n  background: #888;\n  \n  /*\n   * There is a special property called --theme-switch-icon-color\n   * which you can set, to change the color of the icon (shapes) in the switch.\n   * You can even make the color change with animation (for example, on mouse hover);\n   * see https://gist.github.com/mahozad/a8114b6145cac721f7652aa7b0732cf6\n   */\n  --theme-switch-icon-color: #aabbcc;\n}\n```\n\n## Styling a page based on the theme\n\nIn your CSS stylesheet, specify your desired styles for light and dark themes.\nOne way is to define [custom CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\nfor your colors, sizes, etc. and redefine them (if needed) with new values for the other theme:\n\n```css\n/* These are applied for the default (light) theme */\n/* (or when the toggle is auto, and the OS theme is light) */\nhtml {\n  --my-page-background-color: #fff;\n  --my-text-color: red;\n}\n\n/* These are applied for the dark theme */\n/* (or when the toggle is auto, and the OS theme is dark) */\n/* If a property has the same value for light and dark themes, no need to redeclare it here */\nhtml[data-theme=\"dark\"] {\n  --my-page-background-color: #112233;\n}\n\nbody /* or any selector you want */ {\n  background: var(--my-page-background-color);\n  color: var(--my-text-color);\n}\n```\n\n## Theme change event\n\nThe switch element fires (triggers) a custom event called `themeToggle` every time it is toggled (clicked).\nYou can listen and react to it if you want:\n\n```javascript\ndocument.addEventListener(\"themeToggle\", event =\u003e {\n  console.log(`Old theme: ${ event.detail.oldState }`);\n  console.log(`New theme: ${ event.detail.newState }`);\n  // More operations...\n});\n```\n\n## Misc\n\n\u003cdetails\u003e\n\n\u003csummary\u003eClick here to expand\u003c/summary\u003e\n\nThis widget was inspired by [this YouTube video](https://youtu.be/kZiS1QStIWc)\nand [this library](https://github.com/GoogleChromeLabs/dark-mode-toggle).\n\n---\n\nSee [this article](https://css-tricks.com/web-components-are-easier-than-you-think/)\nwhich is about creating HTML custom elements.\n\nSee the icon for switching themes (located in the top right corner) on\n[Google Fonts site](https://fonts.google.com/icons).  \nAlso see [this site](https://rastikerdar.github.io/vazirmatn).\n\nSee [this article](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web)\nfor implementing dark/light theme on sites.\n\nSee [this post](https://stackoverflow.com/q/56300132/8583692) for how to override\ndark/light theme for a site.\n\nSee [this comprehensive GitHub repo](https://github.com/mateusortiz/webcomponents-the-right-way) about custom elements.\n  \nSee [this feature](https://chromestatus.com/feature/5452774595624960).\n\n---\n\n### Similar libraries\n  - [React Toggle Dark Mode](https://github.com/JoseRFelix/react-toggle-dark-mode)\n  - [Dark Mode Toggle](https://github.com/H0rn0chse/dark-mode-toggle)\n  - [\\\u003cdark-mode-toggle\u003e](https://github.com/GoogleChromeLabs/dark-mode-toggle)\n  - [\\\u003ccolor-scheme-button\u003e](https://github.com/CICCIOSGAMINO/color-scheme-button)\n  - [\\\u003ctheme-toggle\u003e](https://github.com/mothepro/theme-toggle)\n  - [Binary theme switcher component](https://github.com/diegosanchezp/theme-switcher-component)\n\n---\n\nTODO:\n  - Try to add the library to [rufus site](https://github.com/pbatard/rufus-web)\n  - Try to add the library to [jest site](https://github.com/facebook/jest) (probably its `docs/` directory. see [this PR](https://github.com/facebook/jest/pull/11021))\n  - Try to add the library to [MDN site](https://developer.mozilla.org/en-US/)\n  - Try to add the library to [docusaurus](https://github.com/facebook/docusaurus)\n  - Try to add the library to [dokka](https://github.com/Kotlin/dokka)\n  - Try to add the library to [Spring website](https://spring.io/) and [Spring docs](https://docs.spring.io/spring-framework/docs/current/reference/html/)\n  - Try to add the library to [mkdocs-material](https://github.com/squidfunk/mkdocs-material)\n  - Try to add the library to [bootstrap website](https://getbootstrap.com/)\n  - Try to add the library to [Electron js website](https://www.electronjs.org/)\n  - Try to add the library to https://playwright.dev/\n  - Try to add the library to https://tailwindcss.com/\n  - Try to add the library to and inspire from https://next.vuetifyjs.com/\n  - Try to add the library to [scoop website](https://scoop.sh/)\n  - See [chrome auto dark feature for android](https://developer.chrome.com/blog/new-in-chrome-98/#autodark-opt-out)\n\n\u003c/details\u003e\n","funding_links":[],"categories":["Real World"],"sub_categories":["Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahozad%2Ftheme-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmahozad%2Ftheme-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahozad%2Ftheme-switch/lists"}