{"_id":"@anatoliygatt/dark-mode-toggle","_rev":"1-dd04c3b355590f8237a98b55d9871df4","name":"@anatoliygatt/dark-mode-toggle","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@anatoliygatt/dark-mode-toggle","version":"1.0.0","description":"A dark mode toggle component for React.","keywords":["react","component","react-component","dark-mode","toggle","dark-mode-toggle","accessible","javascript","typescript"],"homepage":"https://github.com/anatoliygatt/dark-mode-toggle#readme","bugs":{"url":"https://github.com/anatoliygatt/dark-mode-toggle/issues"},"repository":{"type":"git","url":"git+https://github.com/anatoliygatt/dark-mode-toggle.git"},"license":"MIT","author":{"name":"Anatoliy Gatt"},"sideEffects":false,"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","scripts":{"prebuild":"rimraf dist","build":"run-s build:*","build:esbuild":"ts-node scripts/build.ts","build:tsc":"tsc","commit":"git-cz","lint":"run-s lint:*","lint:eslint":"eslint . --ignore-path .gitignore","lint:prettier":"prettier --check . --ignore-path .gitignore","lint:tsc":"tsc --emitDeclarationOnly false --noEmit","prepare":"is-ci || husky install","semantic-release":"semantic-release","test":"jest","test:coverage":"jest --coverage","test:watch":"jest --watch","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"config":{"commitizen":{"path":"cz-conventional-changelog"}},"devDependencies":{"@babel/core":"^7.18.5","@commitlint/cli":"^17.0.2","@commitlint/config-conventional":"^17.0.2","@emotion/jest":"^11.9.4","@emotion/react":"^11.9.3","@emotion/styled":"^11.9.3","@semantic-release/changelog":"^6.0.1","@semantic-release/exec":"^6.0.3","@semantic-release/git":"^10.0.1","@storybook/addon-a11y":"^6.5.9","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/builder-webpack5":"^6.5.9","@storybook/manager-webpack5":"^6.5.9","@storybook/react":"^6.5.9","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@testing-library/user-event":"^14.2.0","@types/jest":"^28.1.1","@types/jest-axe":"^3.5.4","@types/node":"^17.0.43","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@typescript-eslint/eslint-plugin":"^5.28.0","@typescript-eslint/parser":"^5.28.0","babel-loader":"^8.2.5","commitizen":"^4.2.4","conventional-changelog-conventionalcommits":"^5.0.0","esbuild":"^0.14.43","eslint":"^8.17.0","eslint-config-prettier":"^8.5.0","eslint-plugin-import":"^2.26.0","eslint-plugin-jest":"^26.5.3","eslint-plugin-jest-dom":"^4.0.2","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.30.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-storybook":"^0.5.12","eslint-plugin-testing-library":"^5.5.1","husky":"^8.0.1","is-ci":"^3.0.1","jest":"^28.1.1","jest-axe":"^6.0.0","jest-environment-jsdom":"^28.1.1","lint-staged":"^13.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.0","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^3.0.2","semantic-release":"^19.0.3","sort-package-json":"^1.57.0","ts-jest":"^28.0.5","ts-node":"^10.8.1","typescript":"^4.7.3"},"peerDependencies":{"@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0","react":"^16.8.0 || ^17.0.0 || ^18.0.0"},"publishConfig":{"access":"public"},"gitHead":"52bf9a7bfdf78d52bb98d809c475f8b2ec0e76d5","_id":"@anatoliygatt/dark-mode-toggle@1.0.0","_nodeVersion":"16.16.0","_npmVersion":"8.12.1","dist":{"integrity":"sha512-x8/mJLyCUfZLDNbNP1+Us3njXsvRWjp+6o7H1QoaQtvB1ExNV09B17JfJf7lZbHu+mb6xmjk2gqivCwpkRruwA==","shasum":"c8563ea02424b9e2f792384561866203ab94dc43","tarball":"https://registry.npmjs.org/@anatoliygatt/dark-mode-toggle/-/dark-mode-toggle-1.0.0.tgz","fileCount":19,"unpackedSize":60480,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBgUPgGdWqnAS9OsU85UQOlcROC7CgiBRdloanjQnyhwIgL5HfaPiGIAVZC+Pz8yycJASwtN/vGBoCX6Hz2j1gRqQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1mzPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+ng/+PN5hIHkmQIXSwdBfr4UsniV4Fm4RiljX4P57C10X0DAmTX0I\r\nPL8KNj73aQC+D+DuhYaB5uhtQAqmwNT3vR1Dx6JTqljKAKJRGttRqe+lXcCy\r\nP7qRdo1/yah4hwBEAcB11G4Uyb1A/rzuv7kZKioaBfbBgTFYxtgc64YIxLVK\r\nqxfn8FjEuoHe+t2n/WV9RD5h2CPRyJ4A6kwio5gPW469E3wpVTnPabznXdzH\r\nSTB77FKxi3OopCLfN7Ntuyizn7C+x9UctByNl/+FgFlSfGOzeYK6JOfn2EL/\r\nCa7QCR2Eo0yYKVu49CZvt1azz01bg8wreyJMfAUgax7XTnTZvZq++3MZvKoL\r\nQ1dANz/a6bQcOj4fArEApnKGibGzrZ6snp09CLO66iJz102xU3zrg6fEpVUr\r\ngni6Gxukbphtqej77DRdmIOdojhWYpNdBISgffbrgd6xQmppoCUYSgmG/6lK\r\nLiPP4UYjgz2fJdJac4zMPJK1Mo9ti2hxtWE7eWOLHHlBiaQCCwHfO6LFwB91\r\n77u0NZDDQyrikCtB7Q3vRG/h/uek1jU9OKI4qzL7/wlFM/E3Esh+c1pt5xCQ\r\nSkMEUBqsNx8r7kYwlPHGdWy5F8xCLW7xmtG6hqwiCTcwJKCgfXCBZcRS36hn\r\n5eXjP7lIlAdkALrih479Oid0ofGmhhXXyAo=\r\n=vuTc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"agatt","email":"anatoliy@gatt.io"},"directories":{},"maintainers":[{"name":"agatt","email":"anatoliy@gatt.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode-toggle_1.0.0_1658219727234_0.13467758614240632"},"_hasShrinkwrap":false},"1.0.1":{"name":"@anatoliygatt/dark-mode-toggle","version":"1.0.1","description":"A dark mode toggle component for React.","keywords":["react","component","react-component","dark-mode","toggle","dark-mode-toggle","accessible","javascript","typescript"],"homepage":"https://github.com/anatoliygatt/dark-mode-toggle#readme","bugs":{"url":"https://github.com/anatoliygatt/dark-mode-toggle/issues"},"repository":{"type":"git","url":"git+https://github.com/anatoliygatt/dark-mode-toggle.git"},"license":"MIT","author":{"name":"Anatoliy Gatt"},"sideEffects":false,"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","scripts":{"prebuild":"rimraf dist","build":"run-s build:*","build:esbuild":"ts-node scripts/build.ts","build:tsc":"tsc","commit":"git-cz","lint":"run-s lint:*","lint:eslint":"eslint . --ignore-path .gitignore","lint:prettier":"prettier --check . --ignore-path .gitignore","lint:tsc":"tsc --emitDeclarationOnly false --noEmit","prepare":"is-ci || husky install","semantic-release":"semantic-release","test":"jest","test:coverage":"jest --coverage","test:watch":"jest --watch","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"config":{"commitizen":{"path":"cz-conventional-changelog"}},"devDependencies":{"@babel/core":"^7.18.5","@commitlint/cli":"^17.0.2","@commitlint/config-conventional":"^17.0.2","@emotion/jest":"^11.9.4","@emotion/react":"^11.9.3","@emotion/styled":"^11.9.3","@semantic-release/changelog":"^6.0.1","@semantic-release/exec":"^6.0.3","@semantic-release/git":"^10.0.1","@storybook/addon-a11y":"^6.5.9","@storybook/addon-actions":"^6.5.9","@storybook/addon-essentials":"^6.5.9","@storybook/builder-webpack5":"^6.5.9","@storybook/manager-webpack5":"^6.5.9","@storybook/react":"^6.5.9","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@testing-library/user-event":"^14.2.0","@types/jest":"^28.1.1","@types/jest-axe":"^3.5.4","@types/node":"^18.7.5","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","@typescript-eslint/eslint-plugin":"^5.28.0","@typescript-eslint/parser":"^5.28.0","babel-loader":"^8.2.5","commitizen":"^4.2.4","conventional-changelog-conventionalcommits":"^5.0.0","esbuild":"^0.14.43","eslint":"^8.17.0","eslint-config-prettier":"^8.5.0","eslint-plugin-import":"^2.26.0","eslint-plugin-jest":"^26.5.3","eslint-plugin-jest-dom":"^4.0.2","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.30.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-storybook":"^0.6.1","eslint-plugin-testing-library":"^5.5.1","husky":"^8.0.1","is-ci":"^3.0.1","jest":"^28.1.1","jest-axe":"^6.0.0","jest-environment-jsdom":"^28.1.1","lint-staged":"^13.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.0","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^3.0.2","semantic-release":"^19.0.3","sort-package-json":"^1.57.0","ts-jest":"^28.0.5","ts-node":"^10.8.1","typescript":"^4.7.3"},"peerDependencies":{"@emotion/react":"^11.0.0","@emotion/styled":"^11.0.0","react":"^16.8.0 || ^17.0.0 || ^18.0.0"},"publishConfig":{"access":"public"},"gitHead":"b2871f270f3b73d398d3d031fcc6c33b7e53e872","_id":"@anatoliygatt/dark-mode-toggle@1.0.1","_nodeVersion":"16.18.1","_npmVersion":"8.12.1","dist":{"integrity":"sha512-zOjGHCeTGXxuWuh02NMTHAJ7VrptoVKmGHr/Pb4r+rsUBUz7OEI0x6HXTFZ15RFOAG2pfKjMmQQaOgfhfbyv1w==","shasum":"548903c1f16d90243fd7cb3c4d21036c13045d9a","tarball":"https://registry.npmjs.org/@anatoliygatt/dark-mode-toggle/-/dark-mode-toggle-1.0.1.tgz","fileCount":19,"unpackedSize":60497,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAiaYeYMyPeTvadNEHt1H8JF2O78WAquHxv0qIzyfrNrAiEAhv4IJrasldc4agY2EJr8kP/aYpw3JLJwFtLsdKCPJ9c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpuBHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIsA//fMr+7FFAr0NNFEIsW2DYCx63YHzyCFiEVYnix1mVfRgRRCor\r\nLinRh2WiywPziyHsqigzfN5gKgtmxsIPuxP8lFi/TJYe4Aqc4MLKBejbA30L\r\nxhP/oY9Bb4kGOU3OHOPrbxF8QuYzgX0GjsyLvTOeQA9miGXgNObdlk1SJAu0\r\nk2iqfP+S4cRHuqoswnTasBsOZyx8PNqpXhKpL9T0+BvqfiaSPffGxyduTfUf\r\nvpi8YxsYlfugE8sSA2/w7/Nq9+m242fFsX5g45x7gOiZtn2x0OtQ/pavp/CC\r\nJRB0UlkX0FKzssXn3uUCp0m6a42skp+BxVYRW+ec1e3BG/J9rfQVSBtATTpU\r\n89VyGQUeOLuEmJq/UIrMs46xWcUmJ70/imtz+kygfp4b97zCsDUFWe4s5bKl\r\n5xDVIUWalfUiXWshupYM/gbMfKWgqzvvHwACqGw4oacXiXtwcrgQOxp9Ktbq\r\nPSLrKXllQkim6gEl9091Ab6vyDaT4NRMqEbp7NszJx+JM3VeJB3MpyBknCS/\r\nvzUmU2WuqUCwGJsjC7+XflHUarRICzdiRkN7mt8BskNrVh3Rx3xqV1MZ2oEN\r\nsZT5E3TZiS76aKijOIRXXX+94sI0om524+a2TQF9aC8qZN9COH+b9IAWCzsd\r\nwrtHuwYKKMhLvuNPoeGkiqMyeCmN0CjQbwU=\r\n=qBWo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"agatt","email":"anatoliy@gatt.io"},"directories":{},"maintainers":[{"name":"agatt","email":"anatoliy@gatt.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dark-mode-toggle_1.0.1_1671880775033_0.5420307475406991"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-19T08:35:27.139Z","1.0.0":"2022-07-19T08:35:27.433Z","modified":"2022-12-24T11:19:35.300Z","1.0.1":"2022-12-24T11:19:35.181Z"},"maintainers":[{"name":"agatt","email":"anatoliy@gatt.io"}],"description":"A dark mode toggle component for React.","homepage":"https://github.com/anatoliygatt/dark-mode-toggle#readme","keywords":["react","component","react-component","dark-mode","toggle","dark-mode-toggle","accessible","javascript","typescript"],"repository":{"type":"git","url":"git+https://github.com/anatoliygatt/dark-mode-toggle.git"},"author":{"name":"Anatoliy Gatt"},"bugs":{"url":"https://github.com/anatoliygatt/dark-mode-toggle/issues"},"license":"MIT","readme":"
\n\n
\n \"dark-mode-toggle\n
\n\n
\n\n

dark-mode-toggle

\n

A dark mode toggle component for React. Inspired by Tim Silva's Dark/Light Mode Toggle Switch Pattern A11y Dribbble shot.

\n\n
\n\n

\n \n \"Github\n \n \n \"NPM\n \n \n \"License\"\n \n

\n\n
\n\n## 📖 Table of Contents\n\n- [🚀 Getting Started](#-getting-started)\n - [⚡️ Quick Start](#%EF%B8%8F-quick-start)\n - [💻 Live Demo](#-live-demo)\n- [⚙️ Configuration](#%EF%B8%8F-configuration)\n- [♿️ Accessibility](#%EF%B8%8F-accessibility)\n- [👨🏼‍⚖️ License](#%EF%B8%8F-license)\n\n## 🚀 Getting Started\n\n### ⚡️ Quick Start\n\n```shell\nnpm install @anatoliygatt/dark-mode-toggle @emotion/react @emotion/styled\n```\n\n```jsx\nimport { useState } from 'react';\nimport { DarkModeToggle } from '@anatoliygatt/dark-mode-toggle';\n\nfunction Example() {\n const [mode, setMode] = useState('dark');\n return (\n {\n setMode(mode);\n }}\n />\n );\n}\n```\n\n### 💻 Live Demo\n\n[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/demo-for-anatoliygatt-dark-mode-toggle-s0thsv)\n\n## ⚙️ Configuration\n\n`DarkModeToggle` supports the following props:\n\n| Prop | Type | Default value | Description |\n| -------------------------- | -------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| mode | string | `dark` | The color scheme mode. |\n| dark | string | `undefined` | The dark mode label text. |\n| light | string | `undefined` | The light mode label text. |\n| onChange | Function | `undefined` | The callback invoked when the mode changes. |\n| size | string | `sm` | The size of the toggle switch (w/o labels). There are 3 available sizes:**N.B.** If label(s) are used, their font size is going to scale proportionally to the toggle switch as follows: |\n| inactiveLabelColor | string | `#b9bdc1` | The color of the label(s) when the toggle switch is in an inactive/off state. |\n| inactiveLabelColorOnHover | string | `#fcfefe` | The color of the label(s) on hover, when the toggle switch is in an inactive/off state. |\n| inactiveLabelColorOnActive | string | `#cdd1d5` | The color of the label(s) on active, when the toggle switch is in an inactive/off state. |\n| activeLabelColor | string | `#5b5e62` | The color of the label(s) when the toggle switch is in an active/on state. |\n| activeLabelColorOnHover | string | `#404346'` | The color of the label(s) on hover, when the toggle switch is in an active/on state. |\n| activeLabelColorOnActive | string | `#010101` | The color of the label(s) on active, when the toggle switch is in an active/on state. |\n| inactiveTrackColor | string | `#dce0e3` | The color of the track when the toggle switch is in an inactive/off state. |\n| inactiveTrackColorOnHover | string | `#fcfefe` | The color of the track on hover, when the toggle switch is in an inactive/off state. |\n| inactiveTrackColorOnActive | string | `#cdd1d5` | The color of the track on active, when the toggle switch is in an inactive/off state. |\n| activeTrackColor | string | `#404346` | The color of the track when the toggle switch is in an active/on state. |\n| activeTrackColorOnHover | string | `#2d2f31` | The color of the track on hover, when the toggle switch is in an active/on state. |\n| activeTrackColorOnActive | string | `#141516` | The color of the track on active, when the toggle switch is in an active/on state. |\n| inactiveThumbColor | string | `#2d2f31` | The color of the thumb when the toggle switch is in an inactive/off state. |\n| activeThumbColor | string | `#dce0e3` | The color of the thumb when the toggle switch is in an active/on state. |\n| focusRingColor | string | `rgb(59 130 246 / 0.5)` | The color of the toggle switch's focus ring. |\n\n## ♿️ Accessibility\n\nIn order to comply with the web accessibility standards, we must make use of the `ariaLabel` prop, like so:\n\n```jsx\nfunction AccessibleExample() {\n return ;\n}\n```\n\n## 👨🏼‍⚖️ License\n\n[MIT](https://github.com/anatoliygatt/dark-mode-toggle/blob/master/LICENSE)\n","readmeFilename":"README.md"}