use-dark-mode-v2 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2018-present Donavon West
+Copyright (c) 2026-present Anis Tigrini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,122 @@
-# Temporary Holding Version
+# use-dark-mode-v2
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A custom [React Hook](https://react.dev/reference/react/hooks) to help you implement a "dark mode" component for your application.
+The user setting persists to `localStorage`.
+
+[![npm version](https://badge.fury.io/js/use-dark-mode-v2.svg)](https://www.npmjs.com/package/use-dark-mode-v2)
+
+> **This is a maintained fork of [`use-dark-mode`](https://github.com/donavon/use-dark-mode)** by [Donavon West](https://github.com/donavon).
+> The original package still gets thousands of downloads a week, but it hasn't been released since 2019,
+> can't be installed on React 17+ without `--legacy-peer-deps`, and breaks with server rendering in Next.js.
+> This fork fixes those problems and simplifies the API. All credit for the original design goes to Donavon and its [contributors](#contributors).
+
+**📖 Documentation and live demo: https://anistigrini.github.io/use-dark-mode/**
+
+## Installation
+
+```sh
+npm i use-dark-mode-v2
+```
+
+Works with React 16.8 through 19.
+
+## Usage
+
+```jsx
+import useDarkMode from 'use-dark-mode-v2';
+
+function ThemeToggle() {
+  const darkMode = useDarkMode();
+
+  return (
+    <button onClick={darkMode.toggle}>
+      {darkMode.isDarkModeEnabled ? '☀ Light' : '☾ Dark'}
+    </button>
+  );
+}
+```
+
+The hook adds a `dark-mode` or `light-mode` class to `<body>`, saves the user's choice in `localStorage`,
+follows the OS theme until the user picks one, and keeps every component and tab in sync.
+
+`useDarkMode` returns:
+
+| Property | Description |
+|---|---|
+| `isDarkModeEnabled` | `true` when dark mode is on. |
+| `toggle()` | Flip the current mode and save it as the user's choice. |
+| `set(isDarkModeEnabled)` | Turn dark mode on (`true`) or off (`false`) and save it as the user's choice. |
+| `reset()` | Forget the user's choice and go back to the default mode. |
+
+By default the hook follows the OS theme until the user picks a mode. For a site designed dark-first (or light-first),
+pass `useDarkMode({ defaultMode: 'dark' })`: it then starts dark whatever the OS says.
+
+For the full API, the Next.js setup and how to prevent the flash on page load,
+see the [documentation](https://anistigrini.github.io/use-dark-mode/).
+
+## What this fork fixes
+
+- React 17, 18 and 19 support ([#68](https://github.com/donavon/use-dark-mode/pull/68), [#70](https://github.com/donavon/use-dark-mode/issues/70), [#96](https://github.com/donavon/use-dark-mode/issues/96))
+- No hydration errors, flash or double-click toggle in Next.js ([#83](https://github.com/donavon/use-dark-mode/issues/83), [#55](https://github.com/donavon/use-dark-mode/issues/55), [#66](https://github.com/donavon/use-dark-mode/issues/66), [#80](https://github.com/donavon/use-dark-mode/issues/80))
+- Works with Vite and other modern bundlers ([#91](https://github.com/donavon/use-dark-mode/issues/91))
+- Respects the user's choice, and follows the OS theme until they make one ([#52](https://github.com/donavon/use-dark-mode/issues/52))
+- No abandoned dependencies, and no crash when storage is unavailable
+
+## Migrating from `use-dark-mode`
+
+```sh
+npm uninstall use-dark-mode && npm i use-dark-mode-v2
+```
+
+Change your imports to `use-dark-mode-v2`, then update the call and what it returns:
+
+| `use-dark-mode` | `use-dark-mode-v2` |
+|---|---|
+| `useDarkMode(initialState, config)` | `useDarkMode(config)` |
+| `darkMode.value` | `darkMode.isDarkModeEnabled` |
+| `darkMode.enable()` | `darkMode.set(true)` |
+| `darkMode.disable()` | `darkMode.set(false)` |
+| `darkMode.toggle()` | `darkMode.toggle()` (unchanged) |
+
+The other options and the default `storageKey` are unchanged, so your users keep their saved preference.
+`initialState` was only used in browsers without an OS theme setting, so dropping it changes nothing for most apps.
+If you meant it as "start dark", pass `{ defaultMode: 'dark' }`.
+Two behaviours changed on purpose: nothing is saved until the user picks a mode, and once they have, OS theme changes no longer override it (use `reset()` to follow the OS again).
+
+## Sample Apps
+
+If you have an app built with `use-dark-mode-v2` you would like to include on this list, open a PR.
+
+* [Original demo app on CodeSandbox](https://codesandbox.io/s/mzj64x80ny) (uses the original `use-dark-mode`) - by [@donavon](https://twitter.com/donavon)
+
+## License
+
+**[MIT](LICENSE)** Licensed. Original work © Donavon West.
+
+## Contributors
+
+These are the contributors to the original `use-dark-mode`. Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="http://donavon.com"><img src="https://avatars3.githubusercontent.com/u/887639?v=4" width="100px;" alt=""/><br /><sub><b>Donavon West</b></sub></a><br /><a href="#infra-donavon" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/donavon/use-dark-mode/commits?author=donavon" title="Tests">⚠️</a> <a href="#example-donavon" title="Examples">💡</a> <a href="#ideas-donavon" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-donavon" title="Maintenance">🚧</a> <a href="https://github.com/donavon/use-dark-mode/pulls?q=is%3Apr+reviewed-by%3Adonavon" title="Reviewed Pull Requests">👀</a> <a href="#tool-donavon" title="Tools">🔧</a> <a href="https://github.com/donavon/use-dark-mode/commits?author=donavon" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/revelcw"><img src="https://avatars2.githubusercontent.com/u/29359616?v=4" width="100px;" alt=""/><br /><sub><b>Revel Carlberg West</b></sub></a><br /><a href="#ideas-revelcw" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/Andarist"><img src="https://avatars2.githubusercontent.com/u/9800850?v=4" width="100px;" alt=""/><br /><sub><b>Mateusz Burzyński</b></sub></a><br /><a href="https://github.com/donavon/use-dark-mode/commits?author=Andarist" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/wKovacs64"><img src="https://avatars1.githubusercontent.com/u/1288694?v=4" width="100px;" alt=""/><br /><sub><b>Justin Hall</b></sub></a><br /><a href="https://github.com/donavon/use-dark-mode/commits?author=wKovacs64" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/fxbabys"><img src="https://avatars1.githubusercontent.com/u/24556921?v=4" width="100px;" alt=""/><br /><sub><b>Jeremy</b></sub></a><br /><a href="#userTesting-fxbabys" title="User Testing">📓</a> <a href="https://github.com/donavon/use-dark-mode/issues?q=author%3Afxbabys" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="http://janosh.io"><img src="https://avatars0.githubusercontent.com/u/30958850?v=4" width="100px;" alt=""/><br /><sub><b>Janosh Riebesell</b></sub></a><br /><a href="https://github.com/donavon/use-dark-mode/commits?author=janosh" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://hipstersmoothie.com"><img src="https://avatars3.githubusercontent.com/u/1192452?v=4" width="100px;" alt=""/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href="https://github.com/donavon/use-dark-mode/commits?author=hipstersmoothie" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://jorgegonzalez.io"><img src="https://avatars2.githubusercontent.com/u/12901172?v=4" width="100px;" alt=""/><br /><sub><b>Jorge Gonzalez</b></sub></a><br /><a href="https://github.com/donavon/use-dark-mode/commits?author=jorgegonzalez" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

package/dist/use-dark-mode-v2.js

@@ -0,0 +1 @@
+var e=require("react"),t=require("use-sync-external-store/shim"),n=new Map,r=new Map,o=function(e){(n.get(e)||[]).forEach(function(e){return e()})},a=function(){},u=function(u,i,s){void 0===s&&(s=globalThis);var c,d,l=function(){try{return i||s.localStorage||null}catch(e){return null}},f=function(){var e=function(){if(r.has(u))return r.get(u);try{var e=l();return e?e.getItem(u):null}catch(e){return null}}();if(e!==c){c=e;try{d=null===e?void 0:JSON.parse(e)}catch(e){d=void 0}}return d},v=function(){try{l().removeItem(u),r.delete(u)}catch(e){r.set(u,null)}o(u)},m=function(e){n.has(u)||n.set(u,new Set);var t=n.get(u);t.add(e);var r=function(t){t.key!==u&&null!==t.key||e()};return s.addEventListener&&s.addEventListener("storage",r),function(){t.delete(e),0===t.size&&n.delete(u),s.removeEventListener&&s.removeEventListener("storage",r)}};return function(n){var i=t.useSyncExternalStore(m,f,a);return[void 0===i?n:i,e.useCallback(function(e){var t=f();!function(e){var t=JSON.stringify(e);try{l().setItem(u,t),r.delete(u)}catch(e){r.set(u,t)}o(u)}("function"==typeof e?e(void 0===t?n:t):e)},[n]),v]}},i=function(){},s={classList:{add:i,remove:i}},c=function(t){var n=e.useState(void 0),r=n[0],o=n[1];return[void 0===r?t:r,e.useCallback(function(e){o(function(n){return"function"==typeof e?e(void 0===n?t:n):e})},[t]),e.useCallback(function(){return o(void 0)},[])]};module.exports=function(n){void 0===n&&(n={});var r=n.defaultMode;void 0===r&&(r="system");var o=n.element,d=n.classNameDark,l=n.classNameLight,f=n.onChange,v=n.storageKey;void 0===v&&(v="darkMode");var m=n.storageProvider,g=n.global,h=e.useMemo(function(){return function(e,t,n){void 0===n&&(n=globalThis);var r=e?u(e,t,n):c,o=n.matchMedia?n.matchMedia("(prefers-color-scheme: dark)"):null,a=!!o&&"(prefers-color-scheme: dark)"===o.media,d=n.document&&n.document.body||s;return{usePersistedDarkModeState:r,getDefaultOnChange:function(e,t,n){return void 0===e&&(e=d),void 0===t&&(t="dark-mode"),void 0===n&&(n="light-mode"),function(r){e.classList.add(r?t:n),e.classList.remove(r?n:t)}},getSystemSnapshot:function(){return a?o.matches:void 0},subscribeToSystem:function(e){return a?o.addEventListener?(o.addEventListener("change",e),function(){return o.removeEventListener("change",e)}):(o.addListener(e),function(){return o.removeListener(e)}):i}}}(v,m,g)},[v,m,g]),y=h.usePersistedDarkModeState,S=h.getDefaultOnChange,k=t.useSyncExternalStore(h.subscribeToSystem,h.getSystemSnapshot,a),b=y("system"===r?!0===k:"dark"===r),L=b[0],E=b[1],M=b[2],p=e.useMemo(function(){return f||S(o,d,l)},[f,o,d,l,S]);return e.useEffect(function(){p(L)},[p,L]),{isDarkModeEnabled:L,set:e.useCallback(function(e){return E(e)},[E]),toggle:e.useCallback(function(){return E(function(e){return!e})},[E]),reset:M}};

package/dist/use-dark-mode-v2.m.js

@@ -0,0 +1 @@
+import{useCallback as e,useState as t,useEffect as n,useMemo as r}from"react";import{useSyncExternalStore as o}from"use-sync-external-store/shim";var i=new Map,a=new Map,u=function(e){(i.get(e)||[]).forEach(function(e){return e()})},s=function(){},c=function(t,n,r){void 0===r&&(r=globalThis);var c,d,f=function(){try{return n||r.localStorage||null}catch(e){return null}},v=function(){var e=function(){if(a.has(t))return a.get(t);try{var e=f();return e?e.getItem(t):null}catch(e){return null}}();if(e!==c){c=e;try{d=null===e?void 0:JSON.parse(e)}catch(e){d=void 0}}return d},l=function(){try{f().removeItem(t),a.delete(t)}catch(e){a.set(t,null)}u(t)},m=function(e){i.has(t)||i.set(t,new Set);var n=i.get(t);n.add(e);var o=function(n){n.key!==t&&null!==n.key||e()};return r.addEventListener&&r.addEventListener("storage",o),function(){n.delete(e),0===n.size&&i.delete(t),r.removeEventListener&&r.removeEventListener("storage",o)}};return function(n){var r=o(m,v,s);return[void 0===r?n:r,e(function(e){var r=v();!function(e){var n=JSON.stringify(e);try{f().setItem(t,n),a.delete(t)}catch(e){a.set(t,n)}u(t)}("function"==typeof e?e(void 0===r?n:r):e)},[n]),l]}},d=function(){},f={classList:{add:d,remove:d}},v=function(n){var r=t(void 0),o=r[0],i=r[1];return[void 0===o?n:o,e(function(e){i(function(t){return"function"==typeof e?e(void 0===t?n:t):e})},[n]),e(function(){return i(void 0)},[])]};export default function(t){void 0===t&&(t={});var i=t.defaultMode;void 0===i&&(i="system");var a=t.element,u=t.classNameDark,l=t.classNameLight,m=t.onChange,g=t.storageKey;void 0===g&&(g="darkMode");var h=t.storageProvider,y=t.global,L=r(function(){return function(e,t,n){void 0===n&&(n=globalThis);var r=e?c(e,t,n):v,o=n.matchMedia?n.matchMedia("(prefers-color-scheme: dark)"):null,i=!!o&&"(prefers-color-scheme: dark)"===o.media,a=n.document&&n.document.body||f;return{usePersistedDarkModeState:r,getDefaultOnChange:function(e,t,n){return void 0===e&&(e=a),void 0===t&&(t="dark-mode"),void 0===n&&(n="light-mode"),function(r){e.classList.add(r?t:n),e.classList.remove(r?n:t)}},getSystemSnapshot:function(){return i?o.matches:void 0},subscribeToSystem:function(e){return i?o.addEventListener?(o.addEventListener("change",e),function(){return o.removeEventListener("change",e)}):(o.addListener(e),function(){return o.removeListener(e)}):d}}}(g,h,y)},[g,h,y]),p=L.usePersistedDarkModeState,S=L.getDefaultOnChange,k=o(L.subscribeToSystem,L.getSystemSnapshot,s),b=p("system"===i?!0===k:"dark"===i),E=b[0],M=b[1],D=b[2],N=r(function(){return m||S(a,u,l)},[m,a,u,l,S]);return n(function(){N(E)},[N,E]),{isDarkModeEnabled:E,set:e(function(e){return M(e)},[M]),toggle:e(function(){return M(function(e){return!e})},[M]),reset:D}}

package/dist/use-dark-mode-v2.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("use-sync-external-store/shim")):"function"==typeof define&&define.amd?define(["react","use-sync-external-store/shim"],t):e.useDarkModeV2=t(e.react,e.shim)}(this,function(e,t){var n=new Map,r=new Map,o=function(e){(n.get(e)||[]).forEach(function(e){return e()})},u=function(){},a=function(a,i,s){void 0===s&&(s=globalThis);var c,d,f=function(){try{return i||s.localStorage||null}catch(e){return null}},l=function(){var e=function(){if(r.has(a))return r.get(a);try{var e=f();return e?e.getItem(a):null}catch(e){return null}}();if(e!==c){c=e;try{d=null===e?void 0:JSON.parse(e)}catch(e){d=void 0}}return d},v=function(){try{f().removeItem(a),r.delete(a)}catch(e){r.set(a,null)}o(a)},m=function(e){n.has(a)||n.set(a,new Set);var t=n.get(a);t.add(e);var r=function(t){t.key!==a&&null!==t.key||e()};return s.addEventListener&&s.addEventListener("storage",r),function(){t.delete(e),0===t.size&&n.delete(a),s.removeEventListener&&s.removeEventListener("storage",r)}};return function(n){var i=t.useSyncExternalStore(m,l,u);return[void 0===i?n:i,e.useCallback(function(e){var t=l();!function(e){var t=JSON.stringify(e);try{f().setItem(a,t),r.delete(a)}catch(e){r.set(a,t)}o(a)}("function"==typeof e?e(void 0===t?n:t):e)},[n]),v]}},i=function(){},s={classList:{add:i,remove:i}},c=function(t){var n=e.useState(void 0),r=n[0],o=n[1];return[void 0===r?t:r,e.useCallback(function(e){o(function(n){return"function"==typeof e?e(void 0===n?t:n):e})},[t]),e.useCallback(function(){return o(void 0)},[])]};return function(n){void 0===n&&(n={});var r=n.defaultMode;void 0===r&&(r="system");var o=n.element,d=n.classNameDark,f=n.classNameLight,l=n.onChange,v=n.storageKey;void 0===v&&(v="darkMode");var m=n.storageProvider,h=n.global,g=e.useMemo(function(){return function(e,t,n){void 0===n&&(n=globalThis);var r=e?a(e,t,n):c,o=n.matchMedia?n.matchMedia("(prefers-color-scheme: dark)"):null,u=!!o&&"(prefers-color-scheme: dark)"===o.media,d=n.document&&n.document.body||s;return{usePersistedDarkModeState:r,getDefaultOnChange:function(e,t,n){return void 0===e&&(e=d),void 0===t&&(t="dark-mode"),void 0===n&&(n="light-mode"),function(r){e.classList.add(r?t:n),e.classList.remove(r?n:t)}},getSystemSnapshot:function(){return u?o.matches:void 0},subscribeToSystem:function(e){return u?o.addEventListener?(o.addEventListener("change",e),function(){return o.removeEventListener("change",e)}):(o.addListener(e),function(){return o.removeListener(e)}):i}}}(v,m,h)},[v,m,h]),y=g.usePersistedDarkModeState,k=g.getDefaultOnChange,S=t.useSyncExternalStore(g.subscribeToSystem,g.getSystemSnapshot,u),b=y("system"===r?!0===S:"dark"===r),p=b[0],L=b[1],E=b[2],M=e.useMemo(function(){return l||k(o,d,f)},[l,o,d,f,k]);return e.useEffect(function(){M(p)},[M,p]),{isDarkModeEnabled:p,set:e.useCallback(function(e){return L(e)},[L]),toggle:e.useCallback(function(){return L(function(e){return!e})},[L]),reset:E}}});

package/package.json

@@ -1,6 +1,76 @@
 {
   "name": "use-dark-mode-v2",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "publishConfig": {
+    "tag": "latest"
+  },
+  "version": "1.0.0",
+  "description": "A custom React Hook to help you implement a \"dark mode\" component.",
+  "main": "dist/use-dark-mode-v2.js",
+  "umd:main": "dist/use-dark-mode-v2.umd.js",
+  "module": "dist/use-dark-mode-v2.m.js",
+  "source": "src/index.js",
+  "types": "types/index.d.ts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AnisTigrini/use-dark-mode.git"
+  },
+  "homepage": "https://anistigrini.github.io/use-dark-mode/",
+  "bugs": {
+    "url": "https://github.com/AnisTigrini/use-dark-mode/issues"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "lint": "eslint src",
+    "test": "jest --verbose --coverage --silent",
+    "test:watch": "jest --watch --runInBand --silent",
+    "prebuild": "npm run lint && npm t && rimraf dist",
+    "build": "microbundle -o dist/ --sourcemap false --target web",
+    "dev": "microbundle watch -o dist/ --sourcemap false --compress false"
+  },
+  "keywords": [
+    "react-hooks",
+    "hooks",
+    "react",
+    "utils",
+    "lib",
+    "dark-mode"
+  ],
+  "author": "Anis Tigrini",
+  "contributors": [
+    "Donavon West (https://github.com/donavon) - original author"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
+    "eslint": "^5.10.0",
+    "eslint-config-amex": "^9.0.0",
+    "eslint-plugin-react-hooks": "^1.2.0",
+    "jest": "^23.6.0",
+    "jest-dom": "^3.0.0",
+    "microbundle": "^0.9.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-testing-library": "^5.5.0",
+    "rimraf": "^2.6.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "jest": {
+    "coverageThreshold": {
+      "global": {
+        "branches": 100,
+        "functions": 100,
+        "lines": 100,
+        "statements": 100
+      }
+    }
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.7.0"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,30 @@
+declare module 'use-dark-mode-v2' {
+  /**
+   * A config object allowing you to specify certain aspects of `useDarkMode`
+   */
+  export interface DarkModeConfig {
+    defaultMode?: 'system' | 'dark' | 'light'; // The mode before the user picks one (and after `reset`). Default = "system" (follow the OS).
+    classNameDark?: string; // A className to set "dark mode". Default = "dark-mode".
+    classNameLight?: string; // A className to set "light mode". Default = "light-mode".
+    element?: HTMLElement; // The element to apply the className. Default = `document.body`
+    onChange?: (val?: boolean) => void; // Overide the default className handler with a custom callback.
+    storageKey?: string | null; // Specify the `localStorage` key. Default = "darkMode". Set to `null` to disable persistent storage.
+    storageProvider?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>; // A storage provider, e.g. `sessionStorage`. Default = `localStorage`.
+    global?: Window; // The global object. Default = `globalThis`.
+  }
+
+  /**
+   * An object returned from a call to `useDarkMode`.
+   */
+  export interface DarkMode {
+    readonly isDarkModeEnabled: boolean;
+    set: (isDarkModeEnabled: boolean) => void;
+    toggle: () => void;
+    reset: () => void;
+  }
+
+  /**
+   * A custom React Hook to help you implement a "dark mode" component for your application.
+   */
+  export default function useDarkMode(config?: DarkModeConfig): DarkMode;
+}