use-color-theme
Version:
A custom React Hook to help you implement a "color theme" component.
2 lines (1 loc) • 1.85 kB
JavaScript
function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=e(require("@use-it/event-listener")),r=require("react"),n=e(require("use-persisted-state")),u=function(){},a={classList:{add:u,remove:u}},i=function(e,t,u){void 0===u&&(u=global);var i=e?n(e,t):r.useState,o=u.matchMedia?u.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=u.document&&u.document.body||a;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}}};module.exports=function(e,n){void 0===e&&(e="light-theme"),void 0===n&&(n={});var u=n.element,a=n.classNames;void 0===a&&(a=["light-theme","dark-theme"]);var o=n.onChange,s=n.storageKey;void 0===s&&(s="colorTheme");var c=n.storageProvider,d=n.global;a.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=r.useMemo(function(){return i(s,c,d)},[s,c,d]),f=l.getDefaultOnChange,m=l.mediaQueryEventTarget,h=(0,l.usePersistedcolorThemeState)((0,l.getInitialValue)(e)),v=h[0],g=h[1],L=r.useMemo(function(){return o||f(u,a)},[o,u,a,f]);return r.useEffect(function(){L(v)},[L,v]),t("change",function(e){var t=e.matches;return g(function(){return t?"dark-theme":"light-theme"})},m),{value:v,set:r.useCallback(function(e){return g(function(){return a.includes(e)?e:a[0]})},[g,a]),toggle:r.useCallback(function(){return g(function(e){var t=a.length,r=a.indexOf(e);return r!==t-1?a[r+1]:a[0]})},[g,a])}};