@oceanprotocol/use-dark-mode/dist/use-dark-mode.m.js

A custom React Hook to help you implement a "dark mode" component.

import e from"@use-it/event-listener";import{useState as t,useEffect as r,useCallback as n,useMemo as a}from"react";import o from"use-persisted-state";var i=function(){},u={classList:{add:i,remove:i}},d=function(e,r,n){void 0===n&&(n=global);var a=e?o(e,r):t,i=n.matchMedia?n.matchMedia("(prefers-color-scheme: dark)"):{},d={addEventListener:function(e,t){return i.addListener&&i.addListener(t)},removeEventListener:function(e,t){return i.removeListener&&i.removeListener(t)}},s="(prefers-color-scheme: dark)"===i.media,c=n.document&&n.document.body||u;return{usePersistedDarkModeState:a,getDefaultOnChange:function(e,t,r){return void 0===e&&(e=c),void 0===t&&(t="dark-mode"),void 0===r&&(r="light-mode"),function(n){e.classList.add(n?t:r),e.classList.remove(n?r:t)}},mediaQueryEventTarget:d,getInitialValue:function(e){return s?i.matches:e}}};export default function(t,o){void 0===t&&(t=!1),void 0===o&&(o={});var i=o.element,u=o.classNameDark,s=o.classNameLight,c=o.onChange,m=o.storageKey;void 0===m&&(m="darkMode");var l=o.storageProvider,f=o.global,v=a(function(){return d(m,l,f)},[m,l,f]),g=v.getDefaultOnChange,h=v.mediaQueryEventTarget,L=(0,v.usePersistedDarkModeState)((0,v.getInitialValue)(t)),k=L[0],p=L[1],b=a(function(){return c||g(i,u,s)},[c,i,u,s,g]);return r(function(){b(k)},[b,k]),e("change",function(e){return p(e.matches)},h),{value:k,enable:n(function(){return p(!0)},[p]),disable:n(function(){return p(!1)},[p]),toggle:n(function(){return p(function(e){return!e})},[p])}}