{"id":16881762,"url":"https://github.com/kazzkiq/darkmode","last_synced_at":"2025-03-17T06:31:32.615Z","repository":{"id":43912450,"uuid":"260810157","full_name":"kazzkiq/darkmode","owner":"kazzkiq","description":" A micro library (~360B) for handling dark mode on browsers.","archived":false,"fork":false,"pushed_at":"2023-01-06T13:50:52.000Z","size":847,"stargazers_count":83,"open_issues_count":12,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-23T00:14:56.725Z","etag":null,"topics":["dark","dark-theme","darkmode"],"latest_commit_sha":null,"homepage":"","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/kazzkiq.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":"2020-05-03T01:57:21.000Z","updated_at":"2024-08-14T11:38:00.000Z","dependencies_parsed_at":"2023-02-06T04:46:15.663Z","dependency_job_id":null,"html_url":"https://github.com/kazzkiq/darkmode","commit_stats":null,"previous_names":["kazzkiq/escuro"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazzkiq%2Fdarkmode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazzkiq%2Fdarkmode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazzkiq%2Fdarkmode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazzkiq%2Fdarkmode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kazzkiq","download_url":"https://codeload.github.com/kazzkiq/darkmode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243538137,"owners_count":20307104,"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":["dark","dark-theme","darkmode"],"created_at":"2024-10-13T16:05:06.942Z","updated_at":"2025-03-17T06:31:31.865Z","avatar_url":"https://github.com/kazzkiq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"logo.png\" width=\"100\" height=\"100\"\u003e\n  \u003cbr\u003e\n  \u003cb role=\"heading\" aria-level=\"1\"\u003eDarkMode\u003c/b\u003e\n  \u003cbr\u003e\n  A micro library (~360B) for handling dark mode on browsers.\n  \u003cbr\u003e\u003cbr\u003e\n  \u003ca href=\"https://travis-ci.com/kazzkiq/darkmode\"\u003e\u003cimg src=\"https://travis-ci.com/kazzkiq/darkmode.svg?token=8NxvMyxN8sgafdHfeb8d\u0026branch=master\" alt=\"Build Status\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Instalation\n\nYou can install DarkMode via **npm**:\n\n```\nnpm install --save @kazzkiq/darkmode\n```\n\nOr use it directly in browser via CDN service:\n\n```\nhttps://unpkg.com/@kazzkiq/darkmode/dist/darkmode.umd.js\n```\n\n\u003csmall\u003eWhen using directly in browser, all functions will be available under `DarkMode` object.\u003c/small\u003e\n\n## Usage\n\n```js\nimport { isDark, onUpdate } from '@kazzkiq/darkmode';\n\nconst isDarkMode = isDark();\n\nonUpdate((isDark) =\u003e {\n  // isDark will be true or false\n});\n```\n\n### isDark()\n\nTo detect if the browser is in dark mode, simply run `isDark()`.\n\n```js\nimport { isDark } from '@kazzkiq/darkmode';\n\nconst isDarkMode = isDark(); // true|false\n```\n\n### onUpdate()\n\nTo detect if the browser toggled dark mode, you can rely on `onUpdate()`.\n\n```js\nimport { onUpdate } from '@kazzkiq/darkmode';\n\nonUpdate((isDark) =\u003e {\n  // isDark returns true|false\n});\n```\n\n### setDark()\n\nSometimes you will want to let your user decide to enforce dark mode, even when their OS doesn't supports it. In these cases you can programatically set dark mode locally, and by making use of `localStorage` DarkMode can then behave accordingly.\n\n```js\nimport { setDark, isDark, isDarkLocal } from '@kazzkiq/darkmode';\n\nsetDark(true); // now this user is in DarkMode\n\nisDark(); // reads browser/OS dark mode, thus returns false\nisDarkLocal(); // reads localStorage value, thus returns true\n```\n\n`setDark()` also triggers `onUpdate()` automatically.\n\n### isDarkLocal()\n\n`isDark()` will always returns browser/OS dark mode status. When you enforce dark mode using `setDark()`, you can then use `isDarkLocal()` to check if the user preference is for dark mode even with browser/OS not being in this mode.\n\n```js\nimport { isDarkLocal } from '@kazzkiq/darkmode';\n\nconst isDarkMode = isDarkLocal(); // true|false based on localStorage, not on browser/OS configs.\n```\n\n### Browsers which doesn't support it\n\nFor any browser that doesn't supports dark mode, the `isDark()` function will always return  `false`.\n\nEven in browsers that doesn't supports it, you can still \"simulate\" it by using `setDark()` and `isDarkLocal()`.\n\n\n### Function conflicts\n\nIn case of any of DarkMode functions conflict with current functions in your project, you can import them under `DarkMode` namespace to prevent conflicts:\n\n```js\nimport * as DarkMode from '@kazzkiq/darkmode';\n\nDarkMode.isDark();\nDarkMode.onUpdate();\nDarkMode.setDark();\n// ...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazzkiq%2Fdarkmode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkazzkiq%2Fdarkmode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazzkiq%2Fdarkmode/lists"}