UNPKG

@anmiles/theme-switcher

Version:
15 lines (14 loc) 5.43 kB
var ThemeSwitcher=(function(m,a,T){"use strict";var y=document.createElement("style");y.textContent=`.themeSwitcher{cursor:pointer;position:relative}.themeSwitcher>svg:hover,.themeSwitcher li:hover{filter:brightness(1.5)}.themeSwitcher svg{width:2em;height:2em;stroke:currentColor;display:block}.themeSwitcher ul{list-style-type:none;position:absolute;left:0;margin:.5em 0;padding:0;gap:0;overflow-y:visible;z-index:1}.themeSwitcher li{padding:.5em 1em}.themeSwitcher[data-float=right] ul{left:auto;right:0}.themeSwitcher li{display:flex;align-items:center;gap:.5em}.themeSwitcher li svg{width:1.5em;height:1.5em}.themeSwitcher svg.checked{width:16px;height:13.5px} /*$vite$:1*/`,document.head.appendChild(y);var x={exports:{}},l={};var j;function C(){if(j)return l;j=1;var s=a,t=Symbol.for("react.element"),r=Symbol.for("react.fragment"),n=Object.prototype.hasOwnProperty,v=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,w={key:!0,ref:!0,__self:!0,__source:!0};function f(c,o,h){var i,p={},g=null,E=null;h!==void 0&&(g=""+h),o.key!==void 0&&(g=""+o.key),o.ref!==void 0&&(E=o.ref);for(i in o)n.call(o,i)&&!w.hasOwnProperty(i)&&(p[i]=o[i]);if(c&&c.defaultProps)for(i in o=c.defaultProps,o)p[i]===void 0&&(p[i]=o[i]);return{$$typeof:t,type:c,key:g,ref:E,props:p,_owner:v.current}}return l.Fragment=r,l.jsx=f,l.jsxs=f,l}var S;function b(){return S||(S=1,x.exports=C()),x.exports}var e=b(),d={},k;function O(){if(k)return d;k=1;var s=T;return d.createRoot=s.createRoot,d.hydrateRoot=s.hydrateRoot,d}var N=O();class _{constructor(){this.listeners={}}on(t,r){(this.listeners[t]??=[]).push(r)}off(t,r){const n=this.listeners[t]??=[];n.splice(n.indexOf(r),1)}emit(t,...r){this.listeners[t]?.forEach(n=>{n(...r)})}}const u=["light","dark"],R="light";function P(s){return typeof s=="string"&&u.map(String).includes(s)}function I(s){switch(s){case"light":return"Light";case"dark":return"Dark";default:return"System"}}class D extends _{get(){if(!("matchMedia"in window))return R;for(const t of u)if(window.matchMedia(`(prefers-color-scheme: ${t})`).matches)return t;return R}watch(){if("matchMedia"in window)for(const t of u)window.matchMedia(`(prefers-color-scheme: ${t})`).addEventListener("change",n=>{n.matches&&this.emit("change",t)})}}class B extends _{constructor(){super(...arguments),this.storageKey="theme"}get(){const t=localStorage.getItem(this.storageKey);return P(t)?t:void 0}set(t){t?localStorage.setItem(this.storageKey,t):localStorage.removeItem(this.storageKey),this.emit("change",t)}}function J(){return e.jsxs("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"dark",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[e.jsx("circle",{cx:"50",cy:"50",r:"46",strokeDasharray:"180",transform:"rotate(22.5 50 50)"}),e.jsx("circle",{cx:"75",cy:"25",r:"46",strokeDasharray:"108 200",transform:"rotate(67.5 75 25)"})]})}function U(){return e.jsxs("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"light",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[e.jsx("circle",{cx:"50",cy:"50",r:"20"}),e.jsx("path",{d:"M 50 86 v 10",transform:"rotate(0 50 50)"}),e.jsx("path",{d:"M 50 86 v 10",transform:"rotate(90 50 50)"}),e.jsx("path",{d:"M 50 86 v 10",transform:"rotate(180 50 50)"}),e.jsx("path",{d:"M 50 86 v 10",transform:"rotate(270 50 50)"}),e.jsx("path",{d:"M 50 86 v 15",transform:"rotate(45 50 50)"}),e.jsx("path",{d:"M 50 86 v 15",transform:"rotate(135 50 50)"}),e.jsx("path",{d:"M 50 86 v 15",transform:"rotate(225 50 50)"}),e.jsx("path",{d:"M 50 86 v 15",transform:"rotate(315 50 50)"})]})}function W(){return e.jsxs("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"system",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[e.jsx("circle",{cx:"50",cy:"50",r:"46"}),e.jsx("path",{strokeWidth:"0",fill:"currentColor",d:` M 50,0 a 50,50,0,1,1,0,100 Z`})]})}function M({theme:s}){switch(s){case"light":return e.jsx(U,{});case"dark":return e.jsx(J,{});default:return e.jsx(W,{})}}function K(){return e.jsx("svg",{viewBox:"0 0 640 540",xmlns:"http://www.w3.org/2000/svg",className:"checked",children:e.jsx("path",{fill:"currentColor",d:` M 12,370 a 40,40,0,0,1,56.56,-56.56 l 130,130 l 370,-430 a 40,40,0,0,1,56.56,56.56 l -398.28,458.28 a 40,40,0,0,1,-56.56,0 l -140,-140 Z`})})}function Q({currentUserTheme:s,onListItemClick:t}){return e.jsx("ul",{"data-testid":"theme-selector",children:[...u,void 0].map(r=>{const n=I(r);return e.jsxs("li",{"data-testid":`theme-item-${n.toLowerCase()}`,onClick:()=>{t(r)},children:[e.jsx(M,{theme:r}),e.jsx("span",{children:n}),s===r&&e.jsx(K,{})]},n)})})}function L({float:s}){const t=a.useMemo(()=>new B,[]),r=a.useMemo(()=>new D,[]),[n,v]=a.useState(t.get()),[w,f]=a.useState(r.get()),[c,o]=a.useState(!1),h=n??w;return a.useEffect(()=>{document.body.setAttribute("data-theme",h),t.on("change",v),r.on("change",f),r.watch()},[h,t,r]),e.jsxs("div",{className:"themeSwitcher","data-testid":"theme-switcher","data-float":s,onClick:()=>{o(!c)},children:[e.jsx(M,{theme:h}),c?e.jsx(Q,{currentUserTheme:n,onListItemClick:i=>{t.set(i),o(!1)}}):null]})}class A{constructor(t){this.props=t}render(t){N.createRoot(t).render(e.jsx(a.StrictMode,{children:e.jsx(L,{...this.props})}))}}return m.Element=A,m.ThemeSwitcher=L,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"}),m})({},React,ReactDOM);