use-color-theme/dist/use-color-theme.umd.js

A custom React Hook to help you implement a "color theme" component.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("@use-it/event-listener"),require("react"),require("use-persisted-state")):"function"==typeof define&&define.amd?define(["@use-it/event-listener","react","use-persisted-state"],t):e.useColorTheme=t(e.useEventListener,e.react,e.createPersistedState)}(this,function(e,t,r){e=e&&e.hasOwnProperty("default")?e.default:e,r=r&&r.hasOwnProperty("default")?r.default:r;var n=function(){},u={classList:{add:n,remove:n}},a=function(e,n,a){void 0===a&&(a=global);var i=e?r(e,n):t.useState,o=a.matchMedia?a.matchMedia("(prefers-color-scheme: dark)"):{},s={addEventListener:function(e,t){return o.addListener&&o.addListener(t)},removeEventListener:function(e,t){return o.removeListener&&o.removeListener(t)}},c="(prefers-color-scheme: dark)"===o.media,d=a.document&&a.document.body||u;return{usePersistedcolorThemeState:i,getDefaultOnChange:function(e,t){return void 0===e&&(e=d),void 0===t&&(t=["light-theme","dark-theme"]),function(r){t.forEach(function(t){return e.classList.remove(t)}),e.classList.add(r)}},mediaQueryEventTarget:s,getInitialValue:function(e){return c?o.matches:e}}};return function(r,n){void 0===r&&(r="light-theme"),void 0===n&&(n={});var u=n.element,i=n.classNames;void 0===i&&(i=["light-theme","dark-theme"]);var o=n.onChange,s=n.storageKey;void 0===s&&(s="colorTheme");var c=n.storageProvider,d=n.global;i.reduce(function(e,t){if(e.length>0&&e.includes(t))throw new Error("Duplicate Classnames are not allowed.");return e.push(t),e},[]);var l=t.useMemo(function(){return a(s,c,d)},[s,c,d]),f=l.getDefaultOnChange,m=l.mediaQueryEventTarget,h=(0,l.usePersistedcolorThemeState)((0,l.getInitialValue)(r)),v=h[0],g=h[1],p=t.useMemo(function(){return o||f(u,i)},[o,u,i,f]);return t.useEffect(function(){p(v)},[p,v]),e("change",function(e){var t=e.matches;return g(function(){return t?"dark-theme":"light-theme"})},m),{value:v,set:t.useCallback(function(e){return g(function(){return i.includes(e)?e:i[0]})},[g,i]),toggle:t.useCallback(function(){return g(function(e){var t=i.length,r=i.indexOf(e);return r!==t-1?i[r+1]:i[0]})},[g,i])}}});