{"id":15366873,"url":"https://github.com/cupcakearmy/use-light-switch","last_synced_at":"2025-04-15T12:33:30.008Z","repository":{"id":96683117,"uuid":"232186943","full_name":"cupcakearmy/use-light-switch","owner":"cupcakearmy","description":"React Hook for easy dark mode integration","archived":false,"fork":false,"pushed_at":"2021-03-15T17:54:58.000Z","size":32,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T20:12:14.415Z","etag":null,"topics":["dark-mode","react-hooks"],"latest_commit_sha":null,"homepage":"","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/cupcakearmy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"cupcakearmy"}},"created_at":"2020-01-06T21:16:29.000Z","updated_at":"2021-11-04T14:26:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"15da737c-825c-4b2d-a09d-b70929e850e0","html_url":"https://github.com/cupcakearmy/use-light-switch","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":0.3157894736842105,"last_synced_commit":"c0eed9d764cebda8c10162126833e6bb13d1c87b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cupcakearmy%2Fuse-light-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cupcakearmy%2Fuse-light-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cupcakearmy%2Fuse-light-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cupcakearmy%2Fuse-light-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cupcakearmy","download_url":"https://codeload.github.com/cupcakearmy/use-light-switch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249072304,"owners_count":21208162,"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","react-hooks"],"created_at":"2024-10-01T13:20:06.951Z","updated_at":"2025-04-15T12:33:29.991Z","avatar_url":"https://github.com/cupcakearmy.png","language":"TypeScript","funding_links":["https://github.com/sponsors/cupcakearmy"],"categories":[],"sub_categories":[],"readme":"# use-light-switch\n\n![dependencies](https://badgen.net/david/dep/cupcakearmy/use-light-switch)\n![downloads badge](https://badgen.net/npm/dt/use-light-switch)\n![types badge](https://badgen.net/npm/types/use-light-switch)\n![version badge](https://badgen.net/npm/v/use-light-switch)\n![minzip size badge](https://badgen.net/bundlephobia/minzip/use-light-switch)\n\n**React hook for dark mode.**\n\n## 🌈 Features\n\n- Typescript compatible\n- **0** Dependencies\n- Tiny **~0.4kB**\n- React Hooks\n\n###### Installation\n\n```\nnpm i use-light-switch\n```\n\n## 💻 [Live Example](https://codesandbox.io/s/simple-wbpgp)\n\n## 🤔 Motivation\n\nThere was no library that included typings 🤕\n\n## 🛠 Compatibility \u0026 How it works\n\nWe leverage two browser features.\n\n1. [prefers-color-scheme](https://caniuse.com/#feat=prefers-color-scheme) media query.\n2. [matchMedia](https://caniuse.com/#feat=matchmedia)\n\nThe first one is a css media query that gives us the actual user preference. with `window.matchMedia` we can get it inside of javascript and even listen on changes, which makes it reactive.\n\nCurrently (26.05.2020) Safari, iOS, Firefox, Chrome, Edge \u0026 Android all support these features. IE of course is a lost cause.\n\n## 🚀 Quickstart\n\n```typescript\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useModeSelector } from 'use-light-switch'\n\nconst App: React.FC = () =\u003e {\n    const selected = useModeSelector({\n        light: { color: 'green', name: 'Light' },\n        dark: { color: 'red', name: 'Dark' },\n        unset: { color: 'blue', name: 'Unset' },\n    })\n\n    return \u003cdiv\u003e\n        \u003cp\u003eTry switching your dark mode in macOS or Windows\u003c/p\u003e\n        \u003cdiv style={{\n            padding: '1em 2em',\n            backgroundColor: selected.color\n        }}\u003e\n            {selected.name}\n        \u003c/div\u003e\n    \u003c/div\u003e\n}\n\nReactDOM.render(\u003cApp /\u003e, window.document.getElementById('root'))\n```\n\n## 📒 Reference\n\n### `useLightSwitch()`\n\nThis is the most basic react hook. It returns one of 3 [Modes](#mode)\n\n###### Example\n\n```typescript\nimport { Mode, useLightSwitch } from 'use-light-switch'\n\n\nconst Simple: React.FC = () =\u003e {\n    const mode = useLightSwitch()\n\n    if (mode === Mode.Dark) ...\n\n    return ...\n}\n```\n\n\n### Mode\n\nA simple enum. Possible values are:\n\n- `Mode.Light`\n- `Mode.Dark`\n- `Mode.Unset`\n\n`Unset` is returned when the user has no explicit preference. This is often the case with older or if it's simply unsupported.\n\n### `useModeSelector(options)`\n\nThis is a handy hook that reduces boilerplate. You pass values for the different modes and the hook will choose accordingly to what is currently selected. uses [`modeSelector`](#modeselectormode-options) under the hood.\n\n###### Example\n\n```typescript\nimport { useModeSelector } from 'use-light-switch'\n\nconst WithSelector: React.FC = () =\u003e {\n\n    const selected = useModeSelector({\n        light: { color: 'green', name: 'Light' },\n        dark: { color: 'red', name: 'Dark' },\n        unset: { color: 'blue', name: 'Unset' },\n    })\n\n    return \u003cdiv\u003e\n        \u003ch3\u003eSelector\u003c/h3\u003e\n        \u003cdiv style={{\n            padding: '1em 2em',\n            backgroundColor: selected.color\n        }}\u003e\n            {selected.name}\n        \u003c/div\u003e\n    \u003c/div\u003e\n}\n```\n\nAll parameters are optional and typesafe.\n\n### `modeSelector(mode, options)`\n\nThis is a simple functions that returns the matched option to the mode.\n\n###### Example\n\n```typescript\nimport { Mode, modeSelector } from 'use-light-switch'\n\nconst selected = modeSelector(\n    Mode.Dark,\n    {\n        light: { color: 'green', name: 'Light' },\n        dark: { color: 'red', name: 'Dark' },\n        unset: { color: 'blue', name: 'Unset' },\n    }\n)\n\nselected.color  // red\nselected.name  // Dark\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcupcakearmy%2Fuse-light-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcupcakearmy%2Fuse-light-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcupcakearmy%2Fuse-light-switch/lists"}