daynitejs
Version:
A lightweight JavaScript library for toggling light and dark themes.
9 lines (8 loc) • 2.54 kB
JavaScript
function e(e,t){return"string"==typeof e&&t.includes(e)}const t=["light","dark"],s="light";class h{constructor(e={}){this.themes=Array.isArray(e.themes)&&e.themes.length>0?e.themes:t,this.defaultTheme="string"==typeof e.defaultTheme?e.defaultTheme:s,this.storageKey="string"==typeof e.storageKey?e.storageKey:"DayniteJs-theme",this.customStyles="object"==typeof e.customStyles&&null!==e.customStyles?e.customStyles:{},this.callbacks=[],this.init()}init(){e(this.defaultTheme,this.themes)||(console.warn(`Invalid defaultTheme "${this.defaultTheme}". Using '${s}'.`),this.defaultTheme=s);const t=function(e){try{return localStorage.getItem(e)}catch(e){return console.warn("Could not access localStorage:",e),null}}(this.storageKey)||this.defaultTheme;this.setTheme(t),window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{this.setTheme(e.matches?"dark":"light")})}setTheme(t){e(t,this.themes)||(console.warn(`Theme "${t}" is not supported. Falling back to ${this.defaultTheme}.`),t=this.defaultTheme),requestAnimationFrame(()=>{document.documentElement.classList.add("DayniteJs-transition"),document.documentElement.setAttribute("data-theme",t),"dark"===t?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),this.applyCustomStyles(t),function(e,t){try{localStorage.setItem(e,t)}catch(e){console.warn("Could not store theme in localStorage:",e)}}(this.storageKey,t),this.callbacks.forEach(e=>e(t)),setTimeout(()=>{document.documentElement.classList.remove("DayniteJs-transition")},300)})}getTheme(){return document.documentElement.getAttribute("data-theme")||this.defaultTheme}reset(){const t="undefined"!=typeof window&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",s=e(t,this.themes)?t:this.defaultTheme;this.setTheme(s)}toggle(){const t=this.getTheme();if(!e(t,this.themes))return console.warn(`Current theme "${t}" is invalid. Falling back to ${this.defaultTheme}.`),void this.setTheme(this.defaultTheme);const s=(this.themes.indexOf(t)+1)%this.themes.length;this.setTheme(this.themes[s])}onThemeChange(e){"function"==typeof e&&this.callbacks.push(e)}applyCustomStyles(e){const t=this.customStyles[e];t&&"object"==typeof t&&Object.entries(t).forEach(([e,t])=>{document.documentElement.style.setProperty(e,t)})}}
/**
* DayniteJs entry point.
* @author Suhaib Muhammad Babangida <suhaibmuhd04@gmail.com>
* @version 1.0.0
* @license MIT
*/export{h as default};
//# sourceMappingURL=DayniteJs.min.js.map