UNPKG

storybook-addon-theme-changer

Version:

A Storybook addon for switching different themes (ex. daisyUI etc.)

7 lines (5 loc) 1.73 kB
import { useGlobals, useEffect } from '@storybook/preview-api'; var m=e=>{let s=["light","dark"],a="data-theme",t,o;return Array.isArray(e)&&e.length>0?(t=e,o="data-theme"):typeof e=="object"?("themes"in e&&Array.isArray(e.themes)&&e.themes.length>0&&(t=e.themes),"method"in e?e.method.toUpperCase()==="data-theme".toUpperCase()?o="data-theme":e.method.toUpperCase()==="ChakraUI".toUpperCase()?(o="ChakraUI",t=s):o=a:o=a):(t=void 0,o=void 0),{themes:t,method:o}},c=()=>{window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";let a,t,o="light";try{a=localStorage.getItem("chakra-ui-color-mode");}catch{console.log("Chakra UI: localStorage is not available. Color mode persistence might not work as expected");}typeof a=="string"?t=a:t=o,t&&document.documentElement.style.setProperty("--chakra-ui-color-mode",t);};var h=(e,s)=>{let{themes:a}=s.globals,{themes:t,method:o}=m(a),[{theme:r},i]=useGlobals(),f=s.viewMode==="docs",l={light:"chakra-ui-light",dark:"chakra-ui-dark"};return f||(o==="data-theme"?(useEffect(()=>{let d=window.localStorage.getItem("data-theme");d?i({theme:d}):t&&t.length>0&&i({theme:t[0]});},[]),useEffect(()=>{r&&(document.documentElement.setAttribute("data-theme",r),window.localStorage.setItem("data-theme",r));},[r])):o==="ChakraUI"&&(useEffect(()=>{c();},[]),useEffect(()=>{r&&(document.documentElement.dataset.theme=r,document.documentElement.style.colorScheme=r,document.body.classList.add(r==="light"?l.light:l.dark),document.body.classList.remove(r==="light"?l.dark:l.light),localStorage.setItem("chakra-ui-color-mode",r));},[r]))),e()};var g={decorators:[h],globals:{theme:""}},S=g; export { S as default }; //# sourceMappingURL=out.js.map //# sourceMappingURL=preview.js.map