{"id":13422053,"url":"https://github.com/Turkyden/react-darkreader","last_synced_at":"2025-03-15T10:31:38.257Z","repository":{"id":53600162,"uuid":"315512396","full_name":"turkyden/react-darkreader","owner":"turkyden","description":"🌓 A React Hook for adding a dark / night mode to your site. ","archived":false,"fork":false,"pushed_at":"2023-04-13T10:25:53.000Z","size":1472,"stargazers_count":277,"open_issues_count":8,"forks_count":21,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-07T21:02:51.104Z","etag":null,"topics":["dark-mode","dark-mode-switch","dark-theme","darkmode","darkreader","hook","night-mode","react-components","react-hooks","stargazers"],"latest_commit_sha":null,"homepage":"http://react-darkreader.turkyden.com","language":"TypeScript","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/turkyden.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.config.js","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}},"created_at":"2020-11-24T03:53:25.000Z","updated_at":"2024-11-24T15:10:01.000Z","dependencies_parsed_at":"2024-01-25T04:47:40.727Z","dependency_job_id":"acbf3996-973e-4075-a6ba-10a56683032f","html_url":"https://github.com/turkyden/react-darkreader","commit_stats":{"total_commits":102,"total_committers":3,"mean_commits":34.0,"dds":0.2647058823529411,"last_synced_commit":"742cfe8da46bd15c237df56c4ef13a24c0f655de"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turkyden%2Freact-darkreader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turkyden%2Freact-darkreader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turkyden%2Freact-darkreader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turkyden%2Freact-darkreader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/turkyden","download_url":"https://codeload.github.com/turkyden/react-darkreader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719104,"owners_count":20336591,"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-mode","dark-mode-switch","dark-theme","darkmode","darkreader","hook","night-mode","react-components","react-hooks","stargazers"],"created_at":"2024-07-30T23:00:36.270Z","updated_at":"2025-03-15T10:31:37.622Z","avatar_url":"https://github.com/turkyden.png","language":"TypeScript","readme":"English | [简体中文](./README_cn-zh.md)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg align=\"center\" alt=\"react-darkreader\" src=\"https://darkreader.org/images/darkreader-icon-256x256.png\" /\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eReact Darkreader\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e🌓 A React Hook for adding a dark / night mode to your site inspired by \u003ca href=\"https://github.com/darkreader/darkreader\" target=\"_blank\"\u003edarkreader\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-darkreader\" target=\"_blank\"\u003e\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/react-darkreader?color=orange\" /\u003e\u003c/a\u003e \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/react-darkreader\" /\u003e \u003ca href=\"https://github.com/umijs/dumi\" target=\"_blank\"\u003e\u003cimg alt=\"dumi\" src=\"https://img.shields.io/badge/docs%20by-dumi-blue\" /\u003e\u003c/a\u003e \u003cimg alt=\"license\" src=\"https://img.shields.io/github/license/Turkyden/react-darkreader\" /\u003e \u003ca href=\"https://www.jsdelivr.com/package/npm/react-darkreader\" target=\"_blank\"\u003e\u003cimg alt=\"jsdelivr\" src=\"https://data.jsdelivr.com/v1/package/npm/react-darkreader/badge\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eLive Demo ✨ \u003ca href=\"https://react-darkreader.vercel.app\" target=\"_blank\"\u003ehttps://react-darkreader.vercel.app\u003c/a\u003e\u003c/p\u003e\n\n## Getting Started\n\nInstall with yarn\n\n```bash\nyarn add react-darkreader\n```\n\nOr you can\n\n```bash\nnpm install react-darkreader\n```\n\nOr inject the script at your page by [jsdelivr CDN](https://www.jsdelivr.com/)\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/react-darkreader@latest/dist/index.min.js\"\u003e\u003c/script\u003e\n```\n\n## 🚀 Usage\n\nYou can import the darkmode as a react component.\n\n```tsx | pure\nimport React from 'react';\nimport Darkreader from 'react-darkreader';\n\nexport default () =\u003e \u003cDarkreader /\u003e;\n```\n\nYou can also create darkmode by the react hook `useDarkreader`\n\n```tsx | pure\nimport React from 'react';\nimport { Switch, useDarkreader } from 'react-darkreader';\n\nexport default () =\u003e {\n  const [isDark, { toggle }] = useDarkreader(false);\n\n  return \u003cSwitch checked={isDark} onChange={toggle} /\u003e;\n};\n```\n\n## 📔 API\n\n### Component\n\n```tsx | pure\n\u003cDarkreader\n  defaultDarken\n  theme={/** Theme options **/}\n  fixes={/** Contains fixes for the generated theme **/}\n  onChange={isDark =\u003e {\n    /** Callback for change **/\n  }}\n/\u003e\n```\n\n### Hook\n\n```typescript | pure\nconst [isDark, { toggle, collectCSS }] = useDarkreader(defaultDarken, theme?, fixes?)\n```\n\nwith a toggle button as ui.\n\n```tsx | pure\n\u003cSwitch checked={isDark} onChange={toggle} /\u003e\n```\n\n### Result\n\n| Params     | Description                                             | Type                          |\n| ---------- | ------------------------------------------------------- | ----------------------------- |\n| isDark     | The status of current darkmode, support `true`, `false` | `boolean`                     |\n| toggle     | The function for toggling the darkmode.                 | `() =\u003e void`                  |\n| collectCSS | The async function for collecting the css of darkmode.  | `async () =\u003e Promise\u003cstring\u003e` |\n\n### Params\n\n| Params        | Description                                                                                                                                                                   | Type              | Default |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------- |\n| defaultDarken | The default status of the darkreader                                                                                                                                          | `boolean`         | false   |\n| theme         | The options of darkreader Theme [refered to index.d.ts \u0026rarr;](https://github.com/darkreader/darkreader/blob/13c93a995cde0b933580174106897bb1d13f53b4/index.d.ts#L41)         | `Partial\u003cTheme\u003e`  | -       |\n| fixes         | Contains fixes for the generated theme [refered to index.d.ts \u0026rarr;](https://github.com/darkreader/darkreader/blob/13c93a995cde0b933580174106897bb1d13f53b4/index.d.ts#L121) | `DynamicThemeFix` | -       |\n\n## 🔢 Coming Soon\n\n- [x] add the material design styling in switch\n- [ ] followSystemColorScheme\n- [ ] localstorge\n- [ ] playground for editing the config online\n\n## 🔨 Contribute\n\nInstall dependencies,\n\n```bash\n$ npm i\n```\n\nStart the dev server,\n\n```bash\n$ npm start\n```\n\nBuild documentation,\n\n```bash\n$ npm run docs:build\n```\n\nBuild library via `father-build`,\n\n```bash\n$ npm run build\n```\n\n## 🥇 Who is using\n\n| [Ant Design Pro Components Light](https://procomponents.ant.design/) | [Ant Design Pro Components Dark](https://procomponents.ant.design/) |\n| :------------------------------------------------------------------: | :-----------------------------------------------------------------: |\n|    ![Procomponents Light](./screenshot/pro-components_light.png)     |     ![Procomponents Dark](./screenshot/pro-components_dark.png)     |\n\n[More here \u0026rarr;]() Welcome to submit.\n\n## ❤️ Contributors\n\nThanks goes to these people:\n\n![Contributors](https://contrib.rocks/image?repo=Turkyden/react-darkreader)\n\nPlease Feel free to enjoy and participate in open source!\n\n## ⭐ Stargazers\n\nThanks for your star!\n\n[![Stargazers repo roster for @Turkyden/react-darkreader](https://reporoster.com/stars/Turkyden/react-darkreader)](https://github.com/Turkyden/react-darkreader/stargazers)\n\n## ✨ Follow Me\n\n这是作者的微信「视频号」，每天分享一些有趣的 SaaS 软件产品，欢迎关注 ~\n\n\u003cimg width=\"200\" src=\"https://user-images.githubusercontent.com/24560160/230781326-de84d919-1410-4b8a-ad81-3b0f6ffbe7d2.png\"\u003e\n\n## License\n\n[MIT](https://github.com/Turkyden/react-darkreader/blob/main/LICENSE)\n","funding_links":[],"categories":["UI Components","Packages"],"sub_categories":["Miscellaneous"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTurkyden%2Freact-darkreader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTurkyden%2Freact-darkreader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTurkyden%2Freact-darkreader/lists"}