{"version":3,"sources":["../src/color-mode.utils.ts"],"sourcesContent":["import { ColorMode } from \"./color-mode-types\"\n\nconst classNames = {\n  light: \"chakra-ui-light\",\n  dark: \"chakra-ui-dark\",\n}\n\ntype UtilOptions = {\n  preventTransition?: boolean\n}\n\nexport function getColorModeUtils(options: UtilOptions = {}) {\n  const { preventTransition = true } = options\n\n  const utils = {\n    setDataset: (value: ColorMode) => {\n      const cleanup = preventTransition ? utils.preventTransition() : undefined\n      document.documentElement.dataset.theme = value\n      document.documentElement.style.colorScheme = value\n      cleanup?.()\n    },\n    setClassName(dark: boolean) {\n      document.body.classList.add(dark ? classNames.dark : classNames.light)\n      document.body.classList.remove(dark ? classNames.light : classNames.dark)\n    },\n    query() {\n      return window.matchMedia(\"(prefers-color-scheme: dark)\")\n    },\n    getSystemTheme(fallback?: ColorMode) {\n      const dark = utils.query().matches ?? fallback === \"dark\"\n      return dark ? \"dark\" : \"light\"\n    },\n    addListener(fn: (cm: ColorMode) => unknown) {\n      const mql = utils.query()\n      const listener = (e: MediaQueryListEvent) => {\n        fn(e.matches ? \"dark\" : \"light\")\n      }\n\n      if (typeof mql.addListener === \"function\") mql.addListener(listener)\n      else mql.addEventListener(\"change\", listener)\n\n      return () => {\n        if (typeof mql.removeListener === \"function\")\n          mql.removeListener(listener)\n        else mql.removeEventListener(\"change\", listener)\n      }\n    },\n    preventTransition() {\n      const css = document.createElement(\"style\")\n      css.appendChild(\n        document.createTextNode(\n          `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n        ),\n      )\n      document.head.appendChild(css)\n\n      return () => {\n        // force a reflow\n        ;(() => window.getComputedStyle(document.body))()\n\n        // wait for next tick\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            document.head.removeChild(css)\n          })\n        })\n      }\n    },\n  }\n\n  return utils\n}\n"],"mappings":";;;AAEA,IAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AACR;AAMO,SAAS,kBAAkB,UAAuB,CAAC,GAAG;AAC3D,QAAM,EAAE,oBAAoB,KAAK,IAAI;AAErC,QAAM,QAAQ;AAAA,IACZ,YAAY,CAAC,UAAqB;AAChC,YAAM,UAAU,oBAAoB,MAAM,kBAAkB,IAAI;AAChE,eAAS,gBAAgB,QAAQ,QAAQ;AACzC,eAAS,gBAAgB,MAAM,cAAc;AAC7C;AAAA,IACF;AAAA,IACA,aAAa,MAAe;AAC1B,eAAS,KAAK,UAAU,IAAI,OAAO,WAAW,OAAO,WAAW,KAAK;AACrE,eAAS,KAAK,UAAU,OAAO,OAAO,WAAW,QAAQ,WAAW,IAAI;AAAA,IAC1E;AAAA,IACA,QAAQ;AACN,aAAO,OAAO,WAAW,8BAA8B;AAAA,IACzD;AAAA,IACA,eAAe,UAAsB;AA5BzC;AA6BM,YAAM,QAAO,WAAM,MAAM,EAAE,YAAd,YAAyB,aAAa;AACnD,aAAO,OAAO,SAAS;AAAA,IACzB;AAAA,IACA,YAAY,IAAgC;AAC1C,YAAM,MAAM,MAAM,MAAM;AACxB,YAAM,WAAW,CAAC,MAA2B;AAC3C,WAAG,EAAE,UAAU,SAAS,OAAO;AAAA,MACjC;AAEA,UAAI,OAAO,IAAI,gBAAgB;AAAY,YAAI,YAAY,QAAQ;AAAA;AAC9D,YAAI,iBAAiB,UAAU,QAAQ;AAE5C,aAAO,MAAM;AACX,YAAI,OAAO,IAAI,mBAAmB;AAChC,cAAI,eAAe,QAAQ;AAAA;AACxB,cAAI,oBAAoB,UAAU,QAAQ;AAAA,MACjD;AAAA,IACF;AAAA,IACA,oBAAoB;AAClB,YAAM,MAAM,SAAS,cAAc,OAAO;AAC1C,UAAI;AAAA,QACF,SAAS;AAAA,UACP;AAAA,QACF;AAAA,MACF;AACA,eAAS,KAAK,YAAY,GAAG;AAE7B,aAAO,MAAM;AAEX;AAAC,SAAC,MAAM,OAAO,iBAAiB,SAAS,IAAI,GAAG;AAGhD,8BAAsB,MAAM;AAC1B,gCAAsB,MAAM;AAC1B,qBAAS,KAAK,YAAY,GAAG;AAAA,UAC/B,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}