storybook-theme-switch-addon/dist/manager.mjs

Switch easily between multiple themes declared in your css files

import { addons, types, useStorybookApi, useGlobals } from '@storybook/manager-api';
import h, { useState, useEffect } from 'react';
import { WithTooltip, TooltipLinkList } from '@storybook/components';
import { PaintBrushIcon } from '@storybook/icons';

var c="storybook/theme-switch-addon",d=`${c}/tool`;var D=e=>{if(typeof window<"u"){let r=document.querySelector("#storybook-preview-iframe"),t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("type","text/css"),t.setAttribute("href",e),r.contentDocument.querySelector("head").appendChild(t);}},g=e=>{if(typeof window<"u"){let t=document.querySelector("#storybook-preview-iframe").contentDocument.querySelectorAll(`head link[href='${e}']`);t&&t.forEach(o=>{o.remove();});}},l=(e,r)=>{g(r),D(e);};var H=(e,r,t)=>e.map(o=>({...o,onClick:()=>{r(o.id),t();}})),a=(e,r)=>{let{themes:t}=e;return t.find(({id:i})=>i===r)||t[0]},O=()=>{let e=new URLSearchParams(window.location.href).get("globals");if(e){let[r,t]=e.split(":");return t}},u=()=>{let e=useStorybookApi(),[r,t]=useGlobals(),[o,i]=useState(O),[p,b]=useState(),{stylesheets:s}=e.getGlobalTypes();useEffect(()=>{if(s){let{url:n,id:m}=a(s,o);l(n,p),t({theme:m});}},[o]),useEffect(()=>{if(s){let{url:n}=a(s,o);l(n,p);}},[s]);let k=n=>{n!==o&&i(m=>{let{url:I}=a(s,m);return b(I),n});};return h.createElement(WithTooltip,{placement:"top",trigger:"click",tooltip:({onHide:n})=>{if(s){let{themes:m}=s;return h.createElement(TooltipLinkList,{links:H(m,k,n)})}}},h.createElement(PaintBrushIcon,null))};addons.register(c,()=>{addons.add(d,{type:types.TOOL,title:"Theme switcher",match:({viewMode:e})=>!!(e&&e.match(/^(story|docs)$/)),render:u});});
//# sourceMappingURL=out.js.map
//# sourceMappingURL=manager.mjs.map