{"_id":"@btfcss/color-scheme","_rev":"4-0e6ae24ff99ed7f19fff689065878fca","name":"@btfcss/color-scheme","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@btfcss/color-scheme","version":"1.0.0","keywords":["Color","Scheme","Dark","Light","Theme","System","Light","Dark","User","Preferences","Settings"],"author":{"name":"Merlin Chatou"},"license":"ISC","_id":"@btfcss/color-scheme@1.0.0","maintainers":[{"name":"btfcss","email":"btfcss@gmail.com"}],"homepage":"https://github.com/btfcss/color-scheme#readme","bugs":{"url":"https://github.com/btfcss/color-scheme/issues"},"dist":{"shasum":"2b52472ae6ba42af2335758ccffac4ba97f55beb","tarball":"https://registry.npmjs.org/@btfcss/color-scheme/-/color-scheme-1.0.0.tgz","fileCount":3,"integrity":"sha512-tf5Lz2U/TRcguhMi4Hf/7rJ9OyTOTbDnNgs/U8HQL6mi4NWX+Pezo+lDtoiZUShVu6HUIOgZVqRVbtm9M1+MqA==","signatures":[{"sig":"MEQCIFdTNIdxww1E5dTcrkKj+Y3Wy+aBkD0x3sZ6tEKg3RYYAiA3ZqaMaNuPcrtMQSkZuHwRv0sAtvnAyaVqwtiwAcVkQw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4386},"main":"index.js","volta":{"node":"20.18.2"},"gitHead":"a617a50a9ab30138d7762d05bfa3ee5f2f533983","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"btfcss","email":"btfcss@gmail.com"},"repository":{"url":"git+https://github.com/btfcss/color-scheme.git","type":"git"},"_npmVersion":"10.8.2","description":"Color Scheme (Light/Dark mode) manager for front-end JavaScript (user preference / system preference)","directories":{},"_nodeVersion":"20.18.2","dependencies":{"@btfcss/system-color-scheme":"^1.0.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/color-scheme_1.0.0_1747395834987_0.6247651439615673","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@btfcss/color-scheme","version":"1.0.1","keywords":["Color","Scheme","Dark","Light","Theme","System","Light","Dark","User","Preferences","Settings"],"author":{"name":"Merlin Chatou"},"license":"ISC","_id":"@btfcss/color-scheme@1.0.1","maintainers":[{"name":"btfcss","email":"btfcss@gmail.com"}],"homepage":"https://github.com/btfcss/color-scheme#readme","bugs":{"url":"https://github.com/btfcss/color-scheme/issues"},"dist":{"shasum":"f37fdc5ebd57b3166ee0ac13a8d7c0777d949522","tarball":"https://registry.npmjs.org/@btfcss/color-scheme/-/color-scheme-1.0.1.tgz","fileCount":3,"integrity":"sha512-3qmpQpw/W8HRRe7qgGbzGBl7MFy0cH4ALVoU0g7A3mDUI/D/h7tPPaiqgEIvt9S4WxQH8OnM87F4MNFUXojopg==","signatures":[{"sig":"MEYCIQCzhLiIbDyyaoBeipP5Msbj4RsKH1i5Ey6unnaDNUgqFwIhAK+zTk3k3jm1//tGI1b362n0A/bL5c/MpgaCC6mBUUur","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7746},"main":"index.js","volta":{"node":"20.18.2"},"gitHead":"b3fc6a424b5e3115a65f3f313a88ff2b2f817672","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"btfcss","email":"btfcss@gmail.com"},"repository":{"url":"git+https://github.com/btfcss/color-scheme.git","type":"git"},"_npmVersion":"10.8.2","description":"Color Scheme (Light/Dark mode) manager for front-end JavaScript (user preference / system preference)","directories":{},"_nodeVersion":"20.18.2","dependencies":{"@btfcss/system-color-scheme":"^1.0.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/color-scheme_1.0.1_1747396776214_0.3650659102810174","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@btfcss/color-scheme","version":"1.0.2","keywords":["Color","Scheme","Dark","Light","Theme","System","Light","Dark","User","Preferences","Settings"],"author":{"name":"Merlin Chatou"},"license":"ISC","_id":"@btfcss/color-scheme@1.0.2","maintainers":[{"name":"btfcss","email":"btfcss@gmail.com"}],"homepage":"https://github.com/btfcss/color-scheme#readme","bugs":{"url":"https://github.com/btfcss/color-scheme/issues"},"dist":{"shasum":"f6019b5a844ad91cd76d3844381430cefc78d901","tarball":"https://registry.npmjs.org/@btfcss/color-scheme/-/color-scheme-1.0.2.tgz","fileCount":4,"integrity":"sha512-F4dv/zIxqMZOh/aDn6IHJQz/aByR7KhX8Hq85EHcPdhAiwRT0ufuZPCYZl8fABaF9Ja3PFoYITYXG18Z3nu5Hg==","signatures":[{"sig":"MEUCIQDtNuPip43AHq+O+WjhtPAVabwbBkwy/WBIJo6Ln2IO4AIgePeZ5d94tdXMc2Nc3/XJRQmB+2C3ozmbESGHHmpfqsg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3017923},"main":"index.js","volta":{"node":"20.18.2"},"gitHead":"8bd6bad4fec10874d34ac2d57e99c31c6f79e01a","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"btfcss","email":"btfcss@gmail.com"},"repository":{"url":"git+https://github.com/btfcss/color-scheme.git","type":"git"},"_npmVersion":"10.8.2","description":"Color Scheme (Light/Dark mode) manager for front-end JavaScript (user preference / system preference)","directories":{},"_nodeVersion":"20.18.2","dependencies":{"@btfcss/system-color-scheme":"^1.0.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/color-scheme_1.0.2_1747398774057_0.6133931126521814","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@btfcss/color-scheme","version":"1.0.3","description":"Color Scheme (Light/Dark mode) manager for front-end JavaScript (user preference / system preference)","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/btfcss/color-scheme.git"},"keywords":["Color","Scheme","Dark","Light","Theme","System","Light","Dark","User","Preferences","Settings"],"author":{"name":"Merlin Chatou"},"license":"ISC","bugs":{"url":"https://github.com/btfcss/color-scheme/issues"},"homepage":"https://github.com/btfcss/color-scheme#readme","volta":{"node":"20.18.2"},"dependencies":{"@btfcss/system-color-scheme":"^1.0.4"},"_id":"@btfcss/color-scheme@1.0.3","gitHead":"ddb06ea43ced65f8a88f373eb1745d9c023db5cb","_nodeVersion":"20.18.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-mvvzUPNsmxtZ9zeJespyKC3PDWYNvdthGJJstXhhkxLXVNKZTgeES000C2jBQgTzFODLsvLM8z9yBPPhYbvapQ==","shasum":"6a607ce99c87d1285651ce8635ab1a48d5678101","tarball":"https://registry.npmjs.org/@btfcss/color-scheme/-/color-scheme-1.0.3.tgz","fileCount":4,"unpackedSize":3017908,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDgL5lub9vTvxEWhR+cDc1nXuwuKDiotXaJu2h0Wyo04AiEAv4DrajFf1J2vhPzh3q2xUnIUKvaEwhUD9kdC2b1uqnA="}]},"_npmUser":{"name":"btfcss","email":"btfcss@gmail.com"},"directories":{},"maintainers":[{"name":"btfcss","email":"btfcss@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/color-scheme_1.0.3_1747404487016_0.5636712009343854"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-16T11:43:54.910Z","modified":"2025-05-16T14:08:07.526Z","1.0.0":"2025-05-16T11:43:55.184Z","1.0.1":"2025-05-16T11:59:36.411Z","1.0.2":"2025-05-16T12:32:54.298Z","1.0.3":"2025-05-16T14:08:07.350Z"},"bugs":{"url":"https://github.com/btfcss/color-scheme/issues"},"author":{"name":"Merlin Chatou"},"license":"ISC","homepage":"https://github.com/btfcss/color-scheme#readme","keywords":["Color","Scheme","Dark","Light","Theme","System","Light","Dark","User","Preferences","Settings"],"repository":{"type":"git","url":"git+https://github.com/btfcss/color-scheme.git"},"description":"Color Scheme (Light/Dark mode) manager for front-end JavaScript (user preference / system preference)","maintainers":[{"name":"btfcss","email":"btfcss@gmail.com"}],"readme":"# color-scheme\n\n\nThis npm package manages color scheme (Light/Dark mode) for front-end application (user preference / system preference). \nThe color scheme setting is done in the following priority order:\n1. local storage (keep track of previous user choice)\n2. user preference\n3. browser settings\n4. system settings\n\n\nWe recommend using the `color-scheme` CSS property, for example : \n\n```css\n:root {\n  color-scheme: light dark;\n}\n```\n\nNote that this package does not update CSS, but a callback function can be triggered on color scheme change. Update your CSS in this function. \n\n\n\n[![Animation showing the system color scheme manager](/images/color-scheme.gif)](https://youtu.be/4t21iBqSLeI)\n\n\n## Install \n\n```bash\nnpm install btfcss@color-scheme\n```\n\n## Usage\n\nImport the package\n\n```js\nimport colorScheme from \"@btfcss/color-scheme\";\n```\n\n### Get User Choice\n\nThe function `getUserChoice()` returns the current user choice:\n- `\"light\"` : light mode\n- `\"light dark\"` : system settings\n- `\"dark\"` : dark mode\n\n\nIf user choice has never been set, check if a previous choice has been recorded in local storage, otherwise the library set system settings (`\"light dark\"`) as default.\n\n``` js\n// Should display \"light\", \"light dark\" or \"dark\"\nconsole.log (colorScheme.getUserChoice()}\n```\n\n### Get System Color Scheme\n\nThe function `getSystem()` returns the system settings:\n- `\"light\"` : light mode\n- `\"dark\"` : dark mode\n\n``` js\n// Should display \"light\" or \"dark\"\nconsole.log (colorScheme.getSystem()}\n```\n\nNote that the system color scheme is not necessary the same as the page. For example, system can be set to dark while the user selected light in the page. User choice overide system settings. \n\n\n### Get Current Color Scheme\n\nThe function `getCurrent()` returns the page current color scheme:\n- `\"light\"` : light mode\n- `\"dark\"` : dark mode\n\n``` js\n// Should display \"light\" or \"dark\"\nconsole.log (colorScheme.getCurrent()}\n```\n\n### Get Current Status\n\nThe function `get()` returns an object containing the current color scheme status:\n * `status.user` - The user's choice `[\"light\" | \"light dark\" | \" dark\"]`\n * `status.current` - The page color scheme `[\"light\" | \" dark\"]`\n \n ``` js\n// Log the current color scheme status\nconsole.log (colorScheme.getCurrent()}\n// {user: 'light dark', current: 'dark'}\n```\n\n## Set New User Choice\n\nWhen the user selects a new color scheme from the interface, you have to call the `setUserChoice(newChoice)` fonction. The function expects a string as parameter. The value of the string must be one of the following:\n- `\"light\"` : set light mode\n- `\"light dark\"` : set system settings\n- `\"dark\"` : set dark mode\n\nThis function does not update the CSS, but dispatches an event that will trigger the callback function. It is recommended to update the CSS in the callback function. \n\n\n## Listen for Change\n\nThe `addEventListenerOnChange(callback)` set a callback function that will be called when the page color scheme changes. Changes may occurs \n- because the function `setUserChoice()` has been called \n- or because the user choice is set to system (`\"light dark\"`) and system settings has changed. \n\nThe callback function receives the new object status as parameter :\n * `status.user` - The user's choice `[\"light\" | \"light dark\" | \" dark\"]`\n * `status.current` - The page color scheme `[\"light\" | \" dark\"]`\n \n```js\ncolorScheme.addEventListenerOnChange((status) => {\n    // On change, set the new CSS color scheme\n    document.querySelector(':root').style.setProperty('color-scheme', status.user);\n\n    // Log new status in console\n    console.log ('User choice', status.user);\n    console.log ('Current scheme', status.current);\n}));\n```\n\n\n\n## Full Example\n\nThis full example can be tested online in [CodeSandBox](https://codesandbox.io/p/sandbox/color-scheme-yh97d3).\n### HTML\n\n``` html\n<h1>Color Scheme Manager</h1>\nSelect color scheme :\n<select id=\"color-scheme-selector\">\n    <option value=\"light\">Light</option>\n    <option value=\"light dark\" selected>System</option>\n    <option value=\"dark\">Dark</option>\n</select>\n```\n\n### CSS\n\n```css\n:root {\n  color-scheme: light dark;\n}\n\n* {\n  font-family: sans-serif;\n  color: light-dark(#000, #fff);\n  background-color: light-dark(#fff, #000);\n}\n```\n\n\n### JavaSCript\n\n``` js\nimport \"./styles.css\";\nimport colorScheme from \"@btfcss/color-scheme\";\n\n// Get the selector element\nconst selector = document.getElementById(\"color-scheme-selector\");\n\n// When the selector changes\nselector.addEventListener(\"change\", () => {\n  colorScheme.setUserChoice(selector.value);\n});\n\n// Callback function\nfunction onChange(status) {\n  // On change, set the new CSS color scheme\n  document\n    .querySelector(\":root\")\n    .style.setProperty(\"color-scheme\", status.user);\n\n  // Update the selector according to user choice\n  selector.value = status.user;\n}\n\n// Listen color scheme changes\ncolorScheme.addEventListenerOnChange(onChange);\n\n// Call at start up for applying user preferences\nonChange(colorScheme.get());\n```","readmeFilename":"README.md"}