preline/dist/theme-switch.mjs

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

var e={615:(e,t,s)=>{s.d(t,{A:()=>i});class i{constructor(e,t,s){this.el=e,this.options=t,this.events=s,this.el=e,this.options=t,this.events={}}createCollection(e,t){var s;e.push({id:(null===(s=null==t?void 0:t.el)||void 0===s?void 0:s.id)||e.length+1,element:t})}fireEvent(e,t=null){if(this.events.hasOwnProperty(e))return this.events[e](t)}on(e,t){this.events[e]=t}}}},t={};function s(i){var n=t[i];if(void 0!==n)return n.exports;var h=t[i]={exports:{}};return e[i](h,h.exports,s),h.exports}s.d=(e,t)=>{for(var i in t)s.o(t,i)&&!s.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var i={};s.d(i,{A:()=>o});var n=s(615);
/*
 * HSThemeSwitch
 * @version: 3.2.3
 * @author: Preline Labs Ltd.
 * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
 * Copyright 2024 Preline Labs Ltd.
 */class h extends n.A{constructor(e,t){super(e,t);const s=e.getAttribute("data-hs-theme-switch"),i=s?JSON.parse(s):{},n=Object.assign(Object.assign({},i),t);this.theme=(null==n?void 0:n.theme)||localStorage.getItem("hs_theme")||"default",this.type=(null==n?void 0:n.type)||"change",this.init()}elementChange(e){const t=e.target.checked?"dark":"default";this.setAppearance(t),this.toggleObserveSystemTheme()}elementClick(e){this.setAppearance(e),this.toggleObserveSystemTheme()}init(){this.createCollection(window.$hsThemeSwitchCollection,this),"default"!==this.theme&&this.setAppearance(),"click"===this.type?this.buildSwitchTypeOfClick():this.buildSwitchTypeOfChange()}buildSwitchTypeOfChange(){this.el.checked="dark"===this.theme,this.toggleObserveSystemTheme(),this.onElementChangeListener=e=>this.elementChange(e),this.el.addEventListener("change",this.onElementChangeListener)}buildSwitchTypeOfClick(){const e=this.el.getAttribute("data-hs-theme-click-value");this.toggleObserveSystemTheme(),this.onElementClickListener=()=>this.elementClick(e),this.el.addEventListener("click",this.onElementClickListener)}setResetStyles(){const e=document.createElement("style");return e.innerText="*{transition: unset !important;}",e.setAttribute("data-hs-appearance-onload-styles",""),document.head.appendChild(e),e}addSystemThemeObserver(){h.systemThemeObserver||(h.systemThemeObserver=e=>{var t;null===(t=window.$hsThemeSwitchCollection)||void 0===t||t.forEach((e=>{"auto"===localStorage.getItem("hs_theme")&&e.element.setAppearance("auto",!1)}))},window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",h.systemThemeObserver))}removeSystemThemeObserver(){h.systemThemeObserver&&(window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change",h.systemThemeObserver),h.systemThemeObserver=null)}toggleObserveSystemTheme(){"auto"===localStorage.getItem("hs_theme")?this.addSystemThemeObserver():this.removeSystemThemeObserver()}setAppearance(e=this.theme,t=!0,s=!0){const i=document.querySelector("html"),n=this.setResetStyles();t&&localStorage.setItem("hs_theme",e);let h=e;"default"===h&&(h="light"),"auto"===h&&(h=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),i.classList.remove("light","dark","default","auto"),"auto"===e?i.classList.add("auto",h):i.classList.add(h),setTimeout((()=>n.remove())),s&&window.dispatchEvent(new CustomEvent("on-hs-appearance-change",{detail:e}))}destroy(){"change"===this.type&&this.el.removeEventListener("change",this.onElementChangeListener),"click"===this.type&&this.el.removeEventListener("click",this.onElementClickListener),window.$hsThemeSwitchCollection=window.$hsThemeSwitchCollection.filter((({element:e})=>e.el!==this.el))}static getInstance(e,t){const s=window.$hsThemeSwitchCollection.find((t=>t.element.el===("string"==typeof e?document.querySelector(e):e)));return s?t?s:s.element.el:null}static autoInit(){window.$hsThemeSwitchCollection||(window.$hsThemeSwitchCollection=[]),window.$hsThemeSwitchCollection&&(window.$hsThemeSwitchCollection=window.$hsThemeSwitchCollection.filter((({element:e})=>document.contains(e.el)))),document.querySelectorAll("[data-hs-theme-switch]:not(.--prevent-on-load-init)").forEach((e=>{window.$hsThemeSwitchCollection.find((t=>{var s;return(null===(s=null==t?void 0:t.element)||void 0===s?void 0:s.el)===e}))||new h(e,{type:"change"})})),document.querySelectorAll("[data-hs-theme-click-value]:not(.--prevent-on-load-init)").forEach((e=>{window.$hsThemeSwitchCollection.find((t=>{var s;return(null===(s=null==t?void 0:t.element)||void 0===s?void 0:s.el)===e}))||new h(e,{type:"click"})}))}}h.systemThemeObserver=null,window.addEventListener("load",(()=>{h.autoInit()})),window.$hsThemeSwitchCollection&&window.addEventListener("on-hs-appearance-change",(e=>{window.$hsThemeSwitchCollection.forEach((t=>{t.element.el.checked="dark"===e.detail}))})),"undefined"!=typeof window&&(window.HSThemeSwitch=h);const o=h;var l=i.A;export{l as default};