{"_id":"@burzomir/color-mode-detector","_rev":"2-97dd1e39402b58f61e42c482563d5dfd","name":"@burzomir/color-mode-detector","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@burzomir/color-mode-detector","version":"1.0.0","keywords":["color-mode","color-scheme","dark-mode","light-mode","theme","color-theme","theme-detector","dark-theme","light-theme","color-mode-detection","color-scheme-detection","responsive-design","javascript","typescript","web-development","frontend","UI","user-preferences","custom-themes","css","web-apps"],"author":{"name":"Michał Kłobukowski"},"license":"MIT","_id":"@burzomir/color-mode-detector@1.0.0","maintainers":[{"name":"burzomir","email":"burzomirdev@gmail.com"}],"homepage":"https://github.com/burzomir/color-mode-detector#readme","bugs":{"url":"https://github.com/burzomir/color-mode-detector/issues"},"dist":{"shasum":"8e9212c2f0d8049ffcf1c1950370e01c5e25096d","tarball":"https://registry.npmjs.org/@burzomir/color-mode-detector/-/color-mode-detector-1.0.0.tgz","fileCount":12,"integrity":"sha512-wVi5MT01heZTHI4TN4x33HloAzwRT0NhmF22JdWaxHS2oDzb2UZ9xqkY5vD3PjDB9OI8+A9TsqPQTLc4OIW4wg==","signatures":[{"sig":"MEUCIQD0q2dCK3PalvyHvN8ci5jFb8xgelMhDldlTMe0Epot2QIgdkxcFs2o2PYHSjmgHfbL7x+l37JHYw2yByTAYdE5/k8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31268},"types":"dist/types.d.ts","source":"src/index.ts","browser":"dist/index.js","gitHead":"0e21ae9a6b814193bd2ccbda90099cd53148bad8","scripts":{"lint":"eslint","test":"jest","build":"rm -rf ./dist && parcel build","watch":"parcel watch","format":"prettier . --write"},"_npmUser":{"name":"burzomir","email":"burzomirdev@gmail.com"},"repository":{"url":"git+https://github.com/burzomir/color-mode-detector.git","type":"git","directory":"packages/color-mode-detector"},"_npmVersion":"10.8.2","description":"A lightweight JavaScript/TypeScript library for detecting and managing color modes (light/dark) in web applications. Simple to use, with an intuitive API for subscribing to color mode changes and customizing user interfaces accordingly.","directories":{},"_nodeVersion":"22.5.1","_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.9.0","parcel":"^2.12.0","globals":"^15.9.0","ts-jest":"^29.2.4","prettier":"^3.3.3","@eslint/js":"^9.9.0","typescript":"^5.5.4","@types/jest":"^29.5.12","typescript-eslint":"^8.1.0","eslint-config-prettier":"^9.1.0","jest-environment-jsdom":"^29.7.0"},"_npmOperationalInternal":{"tmp":"tmp/color-mode-detector_1.0.0_1723805572348_0.7898711761452168","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@burzomir/color-mode-detector","version":"1.0.1","keywords":["color-mode","color-scheme","dark-mode","light-mode","theme","color-theme","theme-detector","dark-theme","light-theme","color-mode-detection","color-scheme-detection","responsive-design","javascript","typescript","web-development","frontend","UI","user-preferences","custom-themes","css","web-apps"],"author":{"name":"Michał Kłobukowski"},"license":"MIT","_id":"@burzomir/color-mode-detector@1.0.1","maintainers":[{"name":"burzomir","email":"burzomirdev@gmail.com"}],"homepage":"https://github.com/burzomir/color-mode-detector#readme","bugs":{"url":"https://github.com/burzomir/color-mode-detector/issues"},"dist":{"shasum":"fd5a43875afbd714c8d8a088a46d03a3c4fed42c","tarball":"https://registry.npmjs.org/@burzomir/color-mode-detector/-/color-mode-detector-1.0.1.tgz","fileCount":26,"integrity":"sha512-dFrxXsX2op58Wesbsrmb3GhtjFiR+jPSgbvxIXQd1H5WZQJVw/YXgl3Jy0lZ7FwsHtfn4pbupKzeXxQsE1LPaw==","signatures":[{"sig":"MEYCIQC2f9HpF1N1/bY36Uxj/7Z3lbOrAcmbnG42oSWKEa0TZgIhAM84+WJ/3QcozuJ4CfMtRrFwSRwuF2smfqVfBZBXv2FO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183413},"main":"dist/main.js","types":"dist/types.d.ts","module":"dist/module.js","source":"src/index.ts","browser":"dist/browser.js","gitHead":"8db5cbd5d33c5909fec066866a8d2f8982e5a844","scripts":{"lint":"eslint","test":"jest","build":"rm -rf ./.parcel-cache && rm -rf ./dist && parcel build","watch":"rm -rf ./.parcel-cache && parcel watch","format":"prettier . --write"},"_npmUser":{"name":"burzomir","email":"burzomirdev@gmail.com"},"repository":{"url":"git+https://github.com/burzomir/color-mode-detector.git","type":"git"},"_npmVersion":"10.8.2","description":"A lightweight JavaScript/TypeScript library for detecting and managing color modes (light/dark) in web applications. Simple to use, with an intuitive API for subscribing to color mode changes and customizing user interfaces accordingly.","directories":{},"lint-staged":{"src/**/*.ts":["npm run format","npm run lint"],"src/**/*.tsx":["npm run format","npm run lint"]},"_nodeVersion":"22.5.1","browserslist":"> 0.5%, last 2 versions, not dead","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.4","eslint":"^9.9.0","parcel":"^2.12.0","globals":"^15.9.0","ts-jest":"^29.2.4","prettier":"^3.3.3","@eslint/js":"^9.9.0","typescript":"^5.5.4","@types/jest":"^29.5.12","lint-staged":"^15.2.9","typescript-eslint":"^8.1.0","@parcel/packager-ts":"^2.12.0","eslint-config-prettier":"^9.1.0","jest-environment-jsdom":"^29.7.0","@parcel/transformer-typescript-types":"^2.12.0"},"_npmOperationalInternal":{"tmp":"tmp/color-mode-detector_1.0.1_1724147353863_0.08267999447476004","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@burzomir/color-mode-detector","version":"2.0.0","main":"dist/main.js","module":"dist/module.js","browser":"dist/browser.js","source":"src/index.ts","types":"dist/types.d.ts","author":{"name":"Michał Kłobukowski"},"license":"MIT","description":"A lightweight JavaScript/TypeScript library for detecting and managing color modes (light/dark) in web applications. Simple to use, with an intuitive API for subscribing to color mode changes and customizing user interfaces accordingly.","repository":{"type":"git","url":"git+https://github.com/burzomir/color-mode-detector.git"},"bugs":{"url":"https://github.com/burzomir/color-mode-detector/issues"},"browserslist":"> 0.5%, last 2 versions, not dead","keywords":["color-mode","color-scheme","dark-mode","light-mode","theme","color-theme","theme-detector","dark-theme","light-theme","color-mode-detection","color-scheme-detection","responsive-design","javascript","typescript","web-development","frontend","UI","user-preferences","custom-themes","css","web-apps"],"scripts":{"watch":"rm -rf ./.parcel-cache && parcel watch","build":"rm -rf ./.parcel-cache && rm -rf ./dist && parcel build","lint":"eslint","format":"prettier . --write","test":"jest"},"devDependencies":{"@eslint/js":"^9.9.0","@parcel/packager-ts":"^2.12.0","@parcel/transformer-typescript-types":"^2.12.0","@types/jest":"^29.5.12","eslint":"^9.9.0","eslint-config-prettier":"^9.1.0","globals":"^15.9.0","husky":"^9.1.4","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","lint-staged":"^15.2.9","parcel":"^2.12.0","prettier":"^3.3.3","ts-jest":"^29.2.4","typescript":"^5.5.4","typescript-eslint":"^8.1.0"},"lint-staged":{"src/**/*.ts":["npm run format","npm run lint"],"src/**/*.tsx":["npm run format","npm run lint"]},"_id":"@burzomir/color-mode-detector@2.0.0","gitHead":"5542c4c60b9e8343b0e947fc2da9333109c4e847","homepage":"https://github.com/burzomir/color-mode-detector#readme","_nodeVersion":"22.5.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-IwlsHKOpgGcCprPeaWdJl6t1MiPdYm1M2u8nEhNSxoeOqHks2Avd897NgrALj2LzeByttBgIOuHM9UpW0kgXEw==","shasum":"568bcc9abb1cdc0024b74f669d747a1e619fb094","tarball":"https://registry.npmjs.org/@burzomir/color-mode-detector/-/color-mode-detector-2.0.0.tgz","fileCount":12,"unpackedSize":29238,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACU1S+vRntWm8t0oA9hg5zLEoJQw9vjnV2CO6AV5xVXAiBqhdtX18YpSzS2Thv9bn+wCTams+EOQ/ovoWbC6b3aAQ=="}]},"_npmUser":{"name":"burzomir","email":"burzomirdev@gmail.com"},"directories":{},"maintainers":[{"name":"burzomir","email":"burzomirdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/color-mode-detector_2.0.0_1724158528838_0.6909562130494924"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-16T10:52:52.263Z","modified":"2024-08-20T12:55:29.291Z","1.0.0":"2024-08-16T10:52:52.494Z","1.0.1":"2024-08-20T09:49:14.022Z","2.0.0":"2024-08-20T12:55:29.105Z"},"bugs":{"url":"https://github.com/burzomir/color-mode-detector/issues"},"author":{"name":"Michał Kłobukowski"},"license":"MIT","homepage":"https://github.com/burzomir/color-mode-detector#readme","keywords":["color-mode","color-scheme","dark-mode","light-mode","theme","color-theme","theme-detector","dark-theme","light-theme","color-mode-detection","color-scheme-detection","responsive-design","javascript","typescript","web-development","frontend","UI","user-preferences","custom-themes","css","web-apps"],"repository":{"type":"git","url":"git+https://github.com/burzomir/color-mode-detector.git"},"description":"A lightweight JavaScript/TypeScript library for detecting and managing color modes (light/dark) in web applications. Simple to use, with an intuitive API for subscribing to color mode changes and customizing user interfaces accordingly.","maintainers":[{"name":"burzomir","email":"burzomirdev@gmail.com"}],"readme":"# Color Mode Detector\n\nWelcome to **Color Mode Detector** – a straightforward, no-frills library for detecting and managing color modes in your web applications. If you need a simple, reliable solution for handling light and dark modes without any unnecessary overhead, this library is for you.\n\n## Overview\n\n**Color Mode Detector** provides a minimalistic API to help you detect the current color mode (light or dark) and react to changes. It's designed to be easy to use and integrate into any web project, giving you just what you need without any extra fluff.\n\n## Installation\n\nYou can install the library via npm or yarn:\n\n```bash\nnpm install color-mode-detector\n```\n\nor\n\n```bash\nyarn add color-mode-detector\n```\n\n## Getting Started\n\n### Step 1: Import and Initialize\n\nTo get started, import the library and initialize the detector. You can specify the default color mode (light or dark) when initializing:\n\n```typescript\nimport { init, ColorMode } from \"color-mode-detector\";\n\nconst colorModeDetector = init();\n```\n\n### Step 2: Subscribe to Color Mode Changes\n\nSubscribe to color mode changes so you can update your application whenever the mode changes:\n\n```typescript\ncolorModeDetector.subscribe((colorMode: ColorMode) => {\n  switch (colorMode) {\n    case ColorMode.Dark:\n      console.log(\"Color mode changed to dark\");\n      break;\n    case ColorMode.Light:\n      console.log(\"Color mode changed to light\");\n      break;\n  }\n});\n```\n\n### Step 3: Unsubscribe When Done\n\nUnsubscribe from the detector when you no longer need to listen to changes:\n\n```typescript\ncolorModeDetector.unsubscribe(yourCallbackFunction);\n```\n\n### Step 4: Cleanup\n\nWhen your component or application is being unmounted, clean up the detector to avoid memory leaks:\n\n```typescript\ncolorModeDetector.cleanup();\n```\n\n## Example Usage\n\nHere’s a basic example of how you might use **Color Mode Detector** in a React component:\n\n```javascript\nimport { init, ColorMode } from \"@burzomir/color-mode-detector\";\n\n// Initialize the detector\nconst colorModeDetector = init();\n\n// Define a callback function to handle color mode changes\nconst handleColorModeChange = (colorMode) => {\n  console.log(`Color mode is now: ${colorMode}`);\n  document.body.style.backgroundColor = colorMode === \"dark\" ? \"#333\" : \"#FFF\";\n  document.getElementById(\"title\").style.color =\n    colorMode === \"dark\" ? \"#FFF\" : \"#000\";\n};\n\n// Subscribe to color mode changes\ncolorModeDetector.subscribe(handleColorModeChange);\n\n// Cleanup when not needed anymore\nwindow.addEventListener(\"beforeunload\", () => {\n  colorModeDetector.cleanup();\n});\n```\n\n## Contributing\n\nIf you run into any issues or have ideas for improvements, feel free to open an issue or submit a pull request on the [GitHub repository](https://github.com/burzomir/color-mode-detector).\n\nThis library is designed to be simple and efficient – just like your code. If you need a reliable way to manage color modes, give it a try.\n\n## Change log\n\n- 2.0.0\n\n  - Removed cleanup method\n\n    Cleanup is handled automatically when all subscribers are removed\n\n- 1.0.1\n  - Project reorganization\n- 1.0.0\n  - Initial release\n","readmeFilename":"README.md"}