hotkeys-js
Version:
A simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.
2 lines (1 loc) • 3.53 kB
JavaScript
const e=document,t="_dark_mode_theme_",o="permanent",s="colorschemechange",i="light",h="dark",n=(e,t,o=t)=>{Object.defineProperty(e,o,{enumerable:!0,get(){const e=this.getAttribute(t);return null===e?"":e},set(e){this.setAttribute(t,e)}})},r=(e,t,o=t)=>{Object.defineProperty(e,o,{enumerable:!0,get(){return this.hasAttribute(t)},set(e){e?this.setAttribute(t,""):this.removeAttribute(t)}})};class a extends HTMLElement{static get observedAttributes(){return["mode",i,h,o]}LOCAL_NANE=t;constructor(){super(),this.t()}connectedCallback(){n(this,"mode"),n(this,h),n(this,i),r(this,o);const a=localStorage.getItem(t);a&&[i,h].includes(a)&&(this.mode=a,this.permanent=!0),this.permanent&&!a&&localStorage.setItem(t,this.mode);const m=[i,h].includes(a);this.permanent&&a?this.o():(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches&&(this.mode=h,this.o()),window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches&&(this.mode=i,this.o())),this.permanent||m||(window.matchMedia("(prefers-color-scheme: light)").onchange=e=>{this.mode=e.matches?i:h,this.o()},window.matchMedia("(prefers-color-scheme: dark)").onchange=e=>{this.mode=e.matches?h:i,this.o()});new MutationObserver((o,i)=>{this.mode=e.documentElement.dataset.colorMode,this.permanent&&m&&(localStorage.setItem(t,this.mode),this.i("permanentcolorscheme",{permanent:this.permanent})),this.h(),this.i(s,{colorScheme:this.mode})}).observe(e.documentElement,{attributes:!0}),this.i(s,{colorScheme:this.mode}),this.h()}attributeChangedCallback(e,o,s){if("mode"===e&&o!==s&&[i,h].includes(s)){const e=localStorage.getItem(t);this.mode===e?(this.mode=s,this.h(),this.o()):this.mode&&this.mode!==e&&(this.h(),this.o())}else e!==i&&e!==h||o===s||this.h();"permanent"===e&&"boolean"==typeof this.permanent&&(this.permanent?localStorage.setItem(t,this.mode):localStorage.removeItem(t))}o(){e.documentElement.setAttribute("data-color-mode",this.mode)}h(){this.icon.textContent=this.mode===i?"🌒":"🌞",this.text.textContent=this.mode===i?this.getAttribute(h):this.getAttribute(i),!this.text.textContent&&this.text.parentElement&&this.text&&this.text.parentElement.removeChild(this.text)}t(){var o=this.attachShadow({mode:"open"});this.label=e.createElement("span"),this.label.setAttribute("class","wrapper"),this.label.onclick=()=>{this.mode=this.mode===i?h:i,this.permanent&&localStorage.setItem(t,this.mode),this.o(),this.h()},o.appendChild(this.label),this.icon=e.createElement("span"),this.icon.part="icon",this.label.appendChild(this.icon),this.text=e.createElement("span"),this.text.part="text",this.label.appendChild(this.text);const s="_dark_mode_style_";if(!e.getElementById(s)){var n=e.createElement("style");n.id=s,n.textContent="\n[data-color-mode*='dark'], [data-color-mode*='dark'] body {\n color-scheme: dark;\n --color-theme-bg: #0d1117;\n --color-theme-text: #c9d1d9;\n background-color: var(--color-theme-bg);\n color: var(--color-theme-text);\n}\n\n[data-color-mode*='light'], [data-color-mode*='light'] body {\n color-scheme: light;\n --color-theme-bg: #fff;\n --color-theme-text: #24292f;\n background-color: var(--color-theme-bg);\n color: var(--color-theme-text);\n}",e.head.appendChild(n)}var r=e.createElement("style");r.textContent="\n .wrapper { cursor: pointer; user-select: none; position: relative; }\n .wrapper > span + span { margin-left: .4rem; }\n ",o.appendChild(r)}i(e,t){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:t}))}}customElements.define("dark-mode",a);