{"id":13394015,"url":"https://github.com/Assortment/darkmodejs","last_synced_at":"2025-03-13T19:31:56.095Z","repository":{"id":34937520,"uuid":"190467328","full_name":"Assortment/darkmodejs","owner":"Assortment","description":"Utility package for managing Dark Mode on the web","archived":false,"fork":false,"pushed_at":"2023-01-07T04:12:34.000Z","size":1321,"stargazers_count":397,"open_issues_count":12,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-05-07T03:42:47.943Z","etag":null,"topics":["css","darkmode","javascript","matchmedia","mediaquery","prefers-color-scheme"],"latest_commit_sha":null,"homepage":"https://darkmodejs-demo.netlify.com/","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/Assortment.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}},"created_at":"2019-06-05T20:56:15.000Z","updated_at":"2024-04-21T11:43:53.000Z","dependencies_parsed_at":"2023-01-15T10:45:42.885Z","dependency_job_id":null,"html_url":"https://github.com/Assortment/darkmodejs","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Assortment%2Fdarkmodejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Assortment%2Fdarkmodejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Assortment%2Fdarkmodejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Assortment%2Fdarkmodejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Assortment","download_url":"https://codeload.github.com/Assortment/darkmodejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469233,"owners_count":20295715,"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":["css","darkmode","javascript","matchmedia","mediaquery","prefers-color-scheme"],"created_at":"2024-07-30T17:01:05.798Z","updated_at":"2025-03-13T19:31:54.589Z","avatar_url":"https://github.com/Assortment.png","language":"JavaScript","readme":"# darkmodejs\n\n\u003cdiv\u003e\n\n[![Status](https://img.shields.io/badge/status-active-success.svg)]()\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n[![npm](https://img.shields.io/npm/v/@assortment/darkmodejs.svg)](https://www.npmjs.com/package/@assortment/darkmodejs)\n\n\u003c/div\u003e\n\n---\n\nUtility package for managing Dark Mode on the web.\n\n\u003e Dark Mode is a feature in modern Operating Systems which allows you to change your default UI from a light to dark theme. On the web we can take advantage of this to control the theme of our website.\n\nUtilises the [`matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) API and its listeners, in combination with the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query, in order to fire functions whenever you're in Dark Mode.\n\n![Example application using darkmodejs in Windows 10 Firefox](https://i.imgur.com/ZR2aGIE.gif)\n_Example application using darkmodejs in Windows 10 Firefox_\n\n## 📝 Prerequisites\n\nRequires an Operating System which supports Dark Mode:\n\n- macOS 10.14\n- iOS 13.0\n- iPadOS 13.0\n- Windows 10\n- ... or greater\n\nAlso requires support for the `prefers-color-scheme` media query. A complete list of [supported browsers](https://caniuse.com/#search=prefers-color-scheme) can be found on caniuse.\n\n## 🏁 Install\n\n```\n$ npm install @assortment/darkmodejs\n```\n\n## 🎈 Usage \u003ca name=\"usage\"\u003e\u003c/a\u003e\n\n```js\nimport darkmodejs from '@assortment/darkmodejs';\n\nconst config = { onChange: (activeTheme, themes) =\u003e {} };\n\ndarkmodejs(config);\n```\n\nIf you need ES5 support, you can `require` the package instead.\n\n```js\nconst darkmodejs = require('@assortment/darkmodejs');\n```\n\nAn example could be logging to console when a theme is active:\n\n```js\nimport darkmodejs from '@assortment/darkmodejs';\n\nconst onChange = (activeTheme, themes) =\u003e {\n  switch (activeTheme) {\n    case themes.DARK:\n      console.log('darkmode enabled');\n      break;\n    case themes.LIGHT:\n      console.log('lightmode enabled');\n      break;\n    case themes.NO_PREF:\n      console.log('no preference enabled');\n      break;\n    case themes.NO_SUPP:\n      console.log('no support sorry');\n      break;\n  }\n};\n\ndarkmodejs({ onChange });\n```\n\nYou can also do a spot of cleanup by calling the `removeListeners` function that is returned from `darkmodejs`. It removes both `DARK` and `LIGHT` query listeners.\n\n```js\nconst dmjs = darkmodejs({ onChange });\n\ndmjs.removeListeners();\n```\n\nThis can be useful when unmounting components or pages that use dynamic routing techniques.\n\n## ⚙ API\n\n### config\n\n`darkmodejs` accepts a `config` object, which in turn accepts a single function of `onChange`.\n\n#### `onChange(activeTheme, themes)`\n\n_**Type:** `Function`. **Required:** `No`._\n\nThis function is called when `darkmodejs` is executed to check:\n\n- if there is support for `prefers-color-scheme`;\n- if the `dark`, `light` or `no-preference` theme is active.\n\nThe function is also bound to [MediaQueryList.addListener](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener) to listen for changes.\n\n##### `activeTheme`\n\n_**Type:** `String`. **Required:** `No`._\n\nReturns the current active theme.\n\n##### `themes`\n\n_**Type:** `Object{String}`. **Required:** `No`._\n\nReturns all available theme states:\n\n```\n{\n  DARK: 'dark',\n  LIGHT: 'light',\n  NO_PREF: 'no-preference',\n  NO_SUPP: 'no-support'\n}\n```\n\n### returned\n\nOnce initiated, you also have access to the `removeListeners` function for cleanup purposes.\n\n#### `removeListeners`\n\n_**Type**: `Function`._\n\nRemoves both `DARK` and `LIGHT` query listeners.\n\n## 🎬 Examples\n\nThe following examples are taken from `darkmodejs-demo`, a demo application created to show how you can use `@assortment/darkmodejs` in conjunction with [Emotion Theming](https://emotion.sh/docs/theming) to control your website's theme based on a user's OS preference.\n\n- 💻 Code: https://github.com/Assortment/darkmodejs-demo\n- 🌐 URL: https://darkmodejs-demo.netlify.com/\n\n### MacOS\n\n#### Safari (supported)\n\n![Supported in MacOS with Safari](https://i.imgur.com/OZLBAV8.gif)\n\n#### Firefox (supported)\n\n![Supported in MacOS with Firefox](https://i.imgur.com/2IBdHYK.gif)\n\n### Windows 10\n\n#### Firefox (supported)\n\n![Supported in Windows 10 with Firefox](https://i.imgur.com/ZR2aGIE.gif)\n\n#### Chrome (not supported until Chrome 76)\n\n![Not supported in Windows 10 with Chrome 75](https://i.imgur.com/C6pyZVr.gif)\n\n### No preference\n\nSpecial mention to `no-preference`. To my knowledge I don't believe any Operating System currently allows for a no preference option, so there's no current circumstance where this returns true from a `prefers-color-scheme` media query. That said, [as its part of the specification](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) I've included it as an option in the demo app if you ever want to do anything specific.\n\n![Example no preference theme set](https://i.gyazo.com/5555e2439eadfcf80e184b7a4434fbc5.png)\n\n## ✍️ License\n\nMIT © [Luke Whitehouse](https://lukewhitehouse.co.uk)\n","funding_links":[],"categories":["JavaScript","css"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAssortment%2Fdarkmodejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAssortment%2Fdarkmodejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAssortment%2Fdarkmodejs/lists"}