blinds
Version:
A dark mode module for javascript
1 lines • 7.59 kB
JavaScript
export var blindsStylesFinal;export function setBlindsStylesFinal(style){blindsStylesFinal=style}export var blindsStyles={"*":{color:"hsl(228, 5%, 70%)","background-color":"hsl(228, 20%, 10%)","border-color":"hsl(228, 20%, 30%)"}};export function setBlindsStyles(style){blindsStyles=style}export var blindsIcons={dark:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" /></svg>',normal:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" /></svg>'};export function setBlindsIcons(icons){blindsIcons=icons}export function useDefaultIcons(){setBlindsIcons({dark:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" /></svg>',normal:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" /></svg>'})}export function getIcons(){return blindsIcons}export var blindsStorageType="localstorage";export function setBlindsStorageType(storageType){blindsStorageType=storageType}export var blindsStorageKey="blinds_cookie";export function setBlindsStorageKey(storageKey){blindsStorageKey=storageKey}export var blindsStyleId="blinds_style_id";export function setBlindsStyleId(styleId){blindsStyleId=styleId}export var blindsIconsId="blinds_id";export function setBlindsIconsId(iconsId){blindsIconsId=iconsId}export var blindsShowIcons=true;export function setBlindsShowIcons(value){blindsShowIcons=value}export var toggleFuncs=[];export function onToggle(...func){toggleFuncs=func}export var toggleDarkFuncs=[];export function onToggleDark(...func){toggleDarkFuncs=func}export var toggleNormalFuncs=[];export function onToggleNormal(...func){toggleNormalFuncs=func}export function getIconNormal(){return blindsIcons.normal}export function getIconDark(){return blindsIcons.dark}export function showIcon(){switchIcon()}export function switchIcon(){if(blindsShowIcons===true){let node=document.querySelector(`#${blindsIconsId}`);node.innerHTML='<span style="display:none">Dark mode powered by Blinds</span>';if(checkStorage()){node.innerHTML+=getIconNormal()}else{node.innerHTML+=getIconDark()}}}export function constructDarkModeStyle(){let style="";let temp="";let value="";let styles=blindsStyles;Object.keys(blindsStyles).map(selector=>{temp=`\n${selector} {\n`;style+=temp;Object.keys(styles[selector]).map(property=>{value=styles[selector][property];temp=`\t${property}: ${value} !important; \n`;style+=temp});style+="}\n"});return style}export function activateDarkMode(){if(blindsStylesFinal===undefined){setBlindsStylesFinal(constructDarkModeStyle())}let styleTag;if(document.querySelector(`style#${blindsStyleId}`)===null){styleTag=document.createElement("style");styleTag.setAttribute("id",blindsStyleId)}else{styleTag=document.querySelector(`style#${blindsStyleId}`)}styleTag.textContent=blindsStylesFinal;document.head.appendChild(styleTag);setStorage();switchIcon()}export function setOnToggle(){toggleFuncs.map(func=>{func()})}export function setOnToggleDark(){toggleDarkFuncs.map(func=>{func()})}export function setOnToggleNormal(){toggleNormalFuncs.map(func=>{func()})}export function blindsToggle(){if(checkStorage()){deactivateDarkMode();setOnToggleNormal()}else{activateDarkMode();setOnToggleDark()}setOnToggle()}export function setLocalStorage(name,value){window.localStorage.setItem(name,value)}export function getLocalStorage(name){return window.localStorage.getItem(name)}export function checkLocalStorage(name){if(getLocalStorage(name)!==null){return true}return false}export function deleteLocalStorage(name){if(checkLocalStorage(name)){window.localStorage.removeItem(name)}}export function setCookie(cname,cvalue,exdays=30){const d=new Date;d.setTime(d.getTime()+exdays*24*60*60*1e3);let expires="expires="+d.toUTCString();document.cookie=`${cname}=${cvalue};${expires};path=/;SameSite=Strict`}export function getCookie(cname){let name=cname+"=";let decodedCookie=decodeURIComponent(document.cookie);let ca=decodedCookie.split(";");for(let i=0;i<ca.length;i++){let c=ca[i];while(c.charAt(0)==" "){c=c.substring(1)}if(c.indexOf(name)==0){return c.substring(name.length,c.length)}}return null}export function checkCookie(cname){cname=getCookie(cname);if(cname!==null){return true}return false}export function deleteCookie(cname){if(checkCookie(cname)){document.cookie=`${cname}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;SameSite=Strict`}}export function setStorage(name=blindsStorageKey,value="active"){switch(blindsStorageType){case"cookie":setCookie(name,value);break;case"localstorage":setLocalStorage(name,value);break;default:break}}export function getStorage(name=blindsStorageKey){switch(blindsStorageType){case"cookie":return getCookie(name);case"localstorage":return getLocalStorage(name);default:return}}export function checkStorage(name=blindsStorageKey){switch(blindsStorageType){case"cookie":return checkCookie(name);case"localstorage":return checkLocalStorage(name);default:return}}export function deleteStorage(name=blindsStorageKey){switch(blindsStorageType){case"cookie":deleteCookie(name);break;case"localstorage":deleteLocalStorage(name);break;default:break}}export function deactivateDarkMode(){let style=document.querySelector(`style#${blindsStyleId}`);if(style!=null){document.head.removeChild(style);deleteStorage();switchIcon()}}export function isDarkMode(){let mediaQueryObj=window.matchMedia("(prefers-color-scheme: dark)");let isDarkMode=mediaQueryObj.matches;return isDarkMode}export function blindsInit(){if(isDarkMode()&&!checkStorage("blindsInitialized")){activateDarkMode()}if(!checkStorage("blindsInitialized")){setStorage("blindsInitialized","yes")}if(checkStorage()){activateDarkMode()}else{deactivateDarkMode()}switchIcon()}