vanilla-theme
Version:
A small library to quickly add a light and dark mode functionality in you Vanilla JavaScript application
3 lines (2 loc) • 1.48 kB
JavaScript
var u=Object.defineProperty;var o=(e,s)=>u(e,"name",{value:s,configurable:!0});var l="localStorage",g="system",r="class",i=!0,a,c=new Map,h=0,m=window.matchMedia("(prefers-color-scheme: dark)");function b(e){let s=h++;return c.set(s,e),()=>{c.delete(s),h--}}o(b,"subscribe_to_theme_changes");function n(e){for(let s of c.values())s(e)}o(n,"update");function d(){let e=document.documentElement,s=e.classList,t;a&&(a.abort(),a=void 0),r=="class"&&s.remove("dark","light"),l=="localStorage"?t=localStorage.getItem("theme"):l=="sessionStorage"&&(t=sessionStorage.getItem("theme")),(t==null||t!="dark"&&t!="light"&&t!="system")&&(t=g),t=="dark"||t=="light"?(r=="class"?s.add(t):e.setAttribute("data-theme",t),i&&(e.style.colorScheme=t),n(t)):(m.matches?(r=="class"?s.add("dark"):e.setAttribute("data-theme","dark"),i&&(e.style.colorScheme="dark"),n("light")):(r=="class"?s.add("light"):e.setAttribute("data-theme","light"),i&&(e.style.colorScheme="light"),n("dark")),a=new AbortController,m.addEventListener("change",d,{once:!0,signal:a.signal}))}o(d,"set_theme");function S(e){switch(l){case"localStorage":localStorage.setItem("theme",e);break;case"sessionStorage":sessionStorage.setItem("theme",e);break}d()}o(S,"change_theme");function _(e){l=e}o(_,"set_storage");function k(e){g=e}o(k,"set_default");window.addEventListener("DOMContentLoaded",d);export{S as change_theme,k as set_default,_ as set_storage,b as subscribe_to_theme_changes};
//# sourceMappingURL=index.min.mjs.map