{"id":26304658,"url":"https://github.com/berzanorg/usemode","last_synced_at":"2026-04-18T13:34:06.941Z","repository":{"id":65370748,"uuid":"501213534","full_name":"berzanorg/usemode","owner":"berzanorg","description":"🌙 🌞 Simplest way to handle theming in React apps","archived":false,"fork":false,"pushed_at":"2022-06-24T07:45:13.000Z","size":31,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-20T06:48:12.532Z","etag":null,"topics":["modes","moding","react","reactjs","tailwind","tailwindcss","theme","theming"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/usemode","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/berzanorg.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":"2022-06-08T11:03:00.000Z","updated_at":"2022-06-10T10:37:48.000Z","dependencies_parsed_at":"2023-01-20T00:16:18.087Z","dependency_job_id":null,"html_url":"https://github.com/berzanorg/usemode","commit_stats":null,"previous_names":["berzanorg/usemode","berzanxyz/usemode"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/berzanorg/usemode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berzanorg%2Fusemode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berzanorg%2Fusemode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berzanorg%2Fusemode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berzanorg%2Fusemode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/berzanorg","download_url":"https://codeload.github.com/berzanorg/usemode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berzanorg%2Fusemode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31971488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["modes","moding","react","reactjs","tailwind","tailwindcss","theme","theming"],"created_at":"2025-03-15T08:17:50.704Z","updated_at":"2026-04-18T13:34:06.925Z","avatar_url":"https://github.com/berzanorg.png","language":"TypeScript","readme":"# useMode hook\n🌙 🌞 Simplest way to handle theming in React.js apps\n\n\u003e useMode is for applying dark and light mode easily, safely and quickly\n\n\u003e It saves theme to localstorage of the browser\n\n\u003e Supports TailwindCSS, but requires some settings\n\n\u003cbr\u003e\n\n- You can use it like below\n```jsx\nconst mode = useMode()\n```\n```jsx\n\u003cbutton onClick={mode.toggle}\u003eSwitch\u003c/button\u003e\n\n```\n\n\u003e Mode will be changed if the user clicks the button\n\n\u003cbr\u003e\n\nThis library needs TailwindCSS to be configured especially to work\n\n\u003e Add this line to tailwind.config.js \n```javascript\nmodule.exports = {\n   ...\n   darkMode: 'class',\n   ...\n}\n```\n\n## Usage\n- Import the library\n\n```jsx\nimport useMode from \"usemode\"\n```\n\n- `mode` object has those `toggle`, `setSystem`, `setDark`, `setLight`, `name`, `isDark` properties\n\n```jsx\nconst mode = useMode()\n```\n\n## Installation\n\n#### NPM\n```\nnpm i usemode\n```\n\n#### Yarn\n```\nyarn add usemode\n```\n\n## Docs\n\n#### toggle()\n```jsx\nmode.toggle(): function\n```\n\u003e Switches mode as dark and light\n\n\u003cbr/\u003e\n\n#### setSystem()\n```jsx\nmode.setSystem(): function\n```\n\u003e Applies system preferred mode\n\n\u003cbr/\u003e\n\n#### setDark()\n```jsx\nmode.setDark(): function\n```\n\u003e Applies dark mode if it hasn't been done yet\n\n\u003cbr/\u003e\n\n#### setLight()\n```jsx\nmode.setLight(): function\n```\n\u003e Applies light mode if it hasn't been done yet\n\n\u003cbr/\u003e\n\n#### name\n```jsx\nmode.name: \"light\" || \"dark\"\n```\n\u003e Name of the current mode\n\n\u003cbr/\u003e\n\n#### isDark\n```jsx\nmode.isDark: true || false\n```\n\u003e True, if dark mode is used currently. Otherwise, false.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fberzanorg%2Fusemode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fberzanorg%2Fusemode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fberzanorg%2Fusemode/lists"}