UNPKG

@anmiles/theme-switcher

Version:
23 lines (22 loc) 5.75 kB
var ThemeSwitcher=function(d,c,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 w={exports:{}},m={};/** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */var j;function C(){if(j)return m;j=1;var s=c,e=Symbol.for("react.element"),r=Symbol.for("react.fragment"),n=Object.prototype.hasOwnProperty,i=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,g={key:!0,ref:!0,__self:!0,__source:!0};function p(h,o,l){var a,x={},v=null,E=null;l!==void 0&&(v=""+l),o.key!==void 0&&(v=""+o.key),o.ref!==void 0&&(E=o.ref);for(a in o)n.call(o,a)&&!g.hasOwnProperty(a)&&(x[a]=o[a]);if(h&&h.defaultProps)for(a in o=h.defaultProps,o)x[a]===void 0&&(x[a]=o[a]);return{$$typeof:e,type:h,key:v,ref:E,props:x,_owner:i.current}}return m.Fragment=r,m.jsx=p,m.jsxs=p,m}var S;function b(){return S||(S=1,w.exports=C()),w.exports}var t=b(),u={},k;function O(){if(k)return u;k=1;var s=T;return u.createRoot=s.createRoot,u.hydrateRoot=s.hydrateRoot,u}var N=O();class _{constructor(){this.listeners={}}on(e,r){var i;((i=this.listeners)[e]??(i[e]=[])).push(r)}off(e,r){var i;const n=(i=this.listeners)[e]??(i[e]=[]);n.splice(n.indexOf(r),1)}emit(e,...r){var n;(n=this.listeners[e])==null||n.forEach(i=>{i(...r)})}}const f=["light","dark"],R="light";function P(s){return typeof s=="string"&&f.map(String).includes(s)}function I(s){switch(s){case"light":return"Light";case"dark":return"Dark";case void 0:default:return"System"}}class D extends _{get(){if(!("matchMedia"in window))return R;for(const e of f)if(window.matchMedia(`(prefers-color-scheme: ${e})`).matches)return e;return R}watch(){if("matchMedia"in window)for(const e of f)window.matchMedia(`(prefers-color-scheme: ${e})`).addEventListener("change",n=>{n.matches&&this.emit("change",e)})}}class B extends _{constructor(){super(...arguments),this.storageKey="theme"}get(){const e=localStorage.getItem(this.storageKey);return P(e)?e:void 0}set(e){e?localStorage.setItem(this.storageKey,e):localStorage.removeItem(this.storageKey),this.emit("change",e)}}function J(){return t.jsxs("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"dark",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[t.jsx("circle",{cx:"50",cy:"50",r:"46",strokeDasharray:"180",transform:"rotate(22.5 50 50)"}),t.jsx("circle",{cx:"75",cy:"25",r:"46",strokeDasharray:"108 200",transform:"rotate(67.5 75 25)"})]})}function U(){return t.jsxs("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"light",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[t.jsx("circle",{cx:"50",cy:"50",r:"20"}),t.jsx("path",{d:"M 50 86 v 10",transform:"rotate(0 50 50)"}),t.jsx("path",{d:"M 50 86 v 10",transform:"rotate(90 50 50)"}),t.jsx("path",{d:"M 50 86 v 10",transform:"rotate(180 50 50)"}),t.jsx("path",{d:"M 50 86 v 10",transform:"rotate(270 50 50)"}),t.jsx("path",{d:"M 50 86 v 15",transform:"rotate(45 50 50)"}),t.jsx("path",{d:"M 50 86 v 15",transform:"rotate(135 50 50)"}),t.jsx("path",{d:"M 50 86 v 15",transform:"rotate(225 50 50)"}),t.jsx("path",{d:"M 50 86 v 15",transform:"rotate(315 50 50)"})]})}function W(){return t.jsxs("svg",{viewBox:"0 0 100 100",xmlns:"http://www.w3.org/2000/svg",className:"system",strokeWidth:"8",strokeLinecap:"round",fill:"none",children:[t.jsx("circle",{cx:"50",cy:"50",r:"46"}),t.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 t.jsx(U,{});case"dark":return t.jsx(J,{});case void 0:default:return t.jsx(W,{})}}function K(){return t.jsx("svg",{viewBox:"0 0 640 540",xmlns:"http://www.w3.org/2000/svg",className:"checked",children:t.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:e}){return t.jsx("ul",{"data-testid":"theme-selector",children:[...f,void 0].map(r=>{const n=I(r);return t.jsxs("li",{"data-testid":`theme-item-${n.toLowerCase()}`,onClick:()=>{e(r)},children:[t.jsx(M,{theme:r}),t.jsx("span",{children:n}),s===r&&t.jsx(K,{})]},n)})})}function L({float:s}){const e=c.useMemo(()=>new B,[]),r=c.useMemo(()=>new D,[]),[n,i]=c.useState(e.get()),[g,p]=c.useState(r.get()),[h,o]=c.useState(!1),l=n??g;return c.useEffect(()=>{document.body.setAttribute("data-theme",l),e.on("change",i),r.on("change",p),r.watch()},[l,e,r]),t.jsxs("div",{className:"themeSwitcher","data-testid":"theme-switcher","data-float":s,onClick:()=>{o(!h)},children:[t.jsx(M,{theme:l}),h?t.jsx(Q,{currentUserTheme:n,onListItemClick:a=>{e.set(a),o(!1)}}):null]})}class A{constructor(e){this.props=e}render(e){N.createRoot(e).render(t.jsx(c.StrictMode,{children:t.jsx(L,{...this.props})}))}}return d.Element=A,d.ThemeSwitcher=L,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"}),d}({},React,ReactDOM);