@nuxtjs/color-mode
Version:
Dark and Light mode for Nuxt with auto detection
2 lines (1 loc) • 1.34 kB
JavaScript
()=>{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("<%= options.storage %>","<%= options.storageKey %>")||"<%= options.preference %>";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["<%= options.globalName %>"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s="<%= options.classPrefix %>"+o+"<%= options.classSuffix %>",a="<%= options.dataValue %>";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s="<%= options.classPrefix %>"+o+"<%= options.classSuffix %>",a="<%= options.dataValue %>";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"<%= options.fallback %>"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}
;(