{"id":15678012,"url":"https://github.com/jaywcjlove/dark-mode","last_synced_at":"2025-05-07T01:48:40.109Z","repository":{"id":42709406,"uuid":"469861176","full_name":"jaywcjlove/dark-mode","owner":"jaywcjlove","description":"🌓 Add dark mode/night mode custom elements to your website.","archived":false,"fork":false,"pushed_at":"2025-03-17T23:52:10.000Z","size":139,"stargazers_count":14,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-21T18:22:54.598Z","etag":null,"topics":["custom-elements","dark-mode","dark-mode-toggle","dark-theme","prefers-color-scheme","web-components"],"latest_commit_sha":null,"homepage":"https://jaywcjlove.github.io/dark-mode","language":"JavaScript","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/jaywcjlove.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"custom":"https://jaywcjlove.github.io/#/sponsor"}},"created_at":"2022-03-14T18:38:21.000Z","updated_at":"2025-01-13T21:41:20.000Z","dependencies_parsed_at":"2023-12-12T04:43:03.227Z","dependency_job_id":null,"html_url":"https://github.com/jaywcjlove/dark-mode","commit_stats":{"total_commits":69,"total_committers":4,"mean_commits":17.25,"dds":0.07246376811594202,"last_synced_commit":"cd6a8127ab6124ed0cba1ab6063786ce458d8987"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fdark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fdark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fdark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fdark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaywcjlove","download_url":"https://codeload.github.com/jaywcjlove/dark-mode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250930644,"owners_count":21509719,"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-elements","dark-mode","dark-mode-toggle","dark-theme","prefers-color-scheme","web-components"],"created_at":"2024-10-03T16:14:59.480Z","updated_at":"2025-05-07T01:48:40.089Z","avatar_url":"https://github.com/jaywcjlove.png","language":"JavaScript","funding_links":["https://jaywcjlove.github.io/#/sponsor"],"categories":[],"sub_categories":[],"readme":"dark-mode\n===\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor) \n[![CI](https://github.com/jaywcjlove/dark-mode/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/dark-mode/actions/workflows/ci.yml)\n[![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/@wcj/dark-mode/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@wcj/dark-mode)\n[![NPM Downloads](https://img.shields.io/npm/dm/@wcj/dark-mode.svg?style=flat)](https://www.npmjs.com/package/@wcj/dark-mode)\n[![npm version](https://img.shields.io/npm/v/@wcj/dark-mode.svg)](https://www.npmjs.com/package/@wcj/dark-mode)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@wcj/dark-mode/file/README.md)\n\nA custom element that allows you to easily put a Dark Mode 🌒 toggle. so you can initially adhere to your users' preferences according to [`prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme), but also allow them to (optionally permanently) override their system setting for just your site.\n\n## Installation\n\nInstall from npm:\n\n```bash\nnpm install --save @wcj/dark-mode\n```\n\nOr, alternatively, use a `\u003cscript defer\u003e` tag (served from unpkg's CDN):\n\nCDN: [UNPKG](https://unpkg.com/@wcj/dark-mode/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/@wcj/dark-mode/) | [Githack](https://raw.githack.com/jaywcjlove/dark-mode/gh-pages/dark-mode.min.js) | [Statically](https://cdn.statically.io/gh/jaywcjlove/dark-mode/gh-pages/dark-mode.min.js)\n\n```html\n\u003cscript src=\"https://unpkg.com/@wcj/dark-mode\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nThere are two ways how you can use `\u003cdark-mode\u003e`:\n\n```html\n\u003cdark-mode\u003e\u003c/dark-mode\u003e\n\u003cdark-mode light=\"Dark\" dark=\"Light\"\u003e\u003c/dark-mode\u003e\n\u003cdark-mode dark=\"Dark\" light=\"Light\" style=\"border: 1px solid red; font-size: 12px;\"\u003e\u003c/dark-mode\u003e\n```\n\nUse in [React](https://github.com/facebook/react):\n\n```jsx\nimport React from 'react';\nimport '@wcj/dark-mode';\n\nfunction Demo() {\n  return (\n    \u003cdiv\u003e\n      \u003cdark-mode permanent light=\"Light\" dark=\"Dark\"\u003e\u003c/dark-mode\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nToggle in JavaScript: \n\n```js\nconst toggle = document.querySelector('dark-mode');\nconst button = document.createElement('button');\nbutton.textContent = 'Change Theme';\nbutton.onclick = () =\u003e {\n  const theme = document.documentElement.dataset.colorMode;\n  // or =\u003e const theme = toggle.mode\n  document.documentElement.setAttribute('data-color-mode', theme === 'light' ? 'dark' : 'light');\n}\ndocument.body.appendChild(button);\n// Listen for toggle changes\n// and toggle the `dark` class accordingly.\ndocument.addEventListener('colorschemechange', (e) =\u003e {\n  console.log(`Color scheme changed to \"${e.detail.colorScheme}\" or \"${toggle.mode}\".`);\n  button.textContent = toggle.mode === 'dark' ? 'Change Theme 🌞' : 'Change Theme 🌒';\n});\n```\n\nInteracting with the custom element:\n\n```js\nconst darkMode = document.querySelector('dark-mode');\n\n// Set the mode to dark\ndarkMode.mode = 'dark';\n// Set the mode to light\ndarkMode.mode = 'light';\n// Set the mode to dark\ndocument.documentElement.setAttribute('data-color-mode', 'dark');\n// Set the mode to light\ndocument.documentElement.setAttribute('data-color-mode', 'light');\n\n// Set the light label to \"off\"\ndarkMode.light = 'off';\n// Set the dark label to \"on\"\ndarkMode.dark = 'on';\n\n// Set a \"remember the last selected mode\" label\ndarkMode.permanent = true;\n\n// Remember the user's last color scheme choice\ndarkModeToggle.setAttribute('permanent', false);\n// Forget the user's last color scheme choice\ndarkModeToggle.removeAttribute('permanent');\n```\n\nReacting on color scheme changes:\n\n```js\n/* On the page */\ndocument.addEventListener('colorschemechange', (e) =\u003e {\n  console.log(`Color scheme changed to ${e.detail.colorScheme}.`);\n});\n```\n\nReacting on \"remember the last selected mode\" functionality changes:\n\n```js\n/* On the page */\ndocument.addEventListener('permanentcolorscheme', (e) =\u003e {\n  console.log(`${e.detail.permanent ? 'R' : 'Not r'}emembering the last selected mode.`);\n});\n```\n\n## Hide Text and Icons\n\nYou can use the following CSS selectors to hide the text and icon parts of the `dark-mode` component:\n\n```css\ndark-mode::part(text) {\n    display: none;\n}\ndark-mode::part(icon) {\n    display: none;\n}\n```\n\n## Properties\n\nProperties can be set directly on the custom element at creation time, or dynamically via JavaScript.\n\n```typescript\nexport type ColorScheme = 'light' | 'dark';\nexport class DarkMode extends HTMLElement {\n  mode?: ColorScheme;\n  /**\n   * Defaults to not remember the last choice.\n   * If present remembers the last selected mode (`dark` or `light`),\n   * which allows the user to permanently override their usual preferred color scheme.\n   */\n  permanent?: boolean;\n  /**\n   * Any string value that represents the label for the \"dark\" mode.\n   */\n  dark?: string;\n  /**\n   * Any string value that represents the label for the \"light\" mode.\n   */\n  light?: string;\n  style?: React.CSSProperties;\n}\n```\n\n## Events\n\n- `colorschemechange`: Fired when the color scheme gets changed.\n- `permanentcolorscheme`: Fired when the color scheme should be permanently remembered or not.\n\n## Alternatives\n\n- [dark-mode-toggle](https://github.com/GoogleChromeLabs/dark-mode-toggle) \u003cimg align=\"bottom\" height=\"13\" src=\"https://img.shields.io/github/stars/GoogleChromeLabs/dark-mode-toggle.svg?label=\" /\u003e A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site\n- [Darkmode.js](https://github.com/sandoche/Darkmode.js) \u003cimg align=\"bottom\" height=\"13\" src=\"https://img.shields.io/github/stars/sandoche/Darkmode.js.svg?label=\" /\u003e Add a dark-mode / night-mode to your website in a few seconds\n- [darken](https://github.com/ColinEspinas/darken) \u003cimg align=\"bottom\" height=\"13\" src=\"https://img.shields.io/github/stars/ColinEspinas/darken.svg?label=\" /\u003e Dark mode made easy\n- [use-dark-mode](https://github.com/donavon/use-dark-mode) \u003cimg align=\"bottom\" height=\"13\" src=\"https://img.shields.io/github/stars/donavon/use-dark-mode.svg?label=\" /\u003e A custom React Hook to help you implement a \"dark mode\" component.\n- [Dark Mode Switch](https://github.com/coliff/dark-mode-switch) \u003cimg align=\"bottom\" height=\"13\" src=\"https://img.shields.io/github/stars/coliff/dark-mode-switch.svg?label=\" /\u003e Add a dark-mode theme toggle with a Bootstrap Custom Switch\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\u003ca href=\"https://github.com/jaywcjlove/dark-mode/graphs/contributors\"\u003e\n  \u003cimg src=\"https://jaywcjlove.github.io/dark-mode/CONTRIBUTORS.svg\" /\u003e\n\u003c/a\u003e\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n## License\n\nLicensed under the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2Fdark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaywcjlove%2Fdark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2Fdark-mode/lists"}