1 line
5.5 KiB
Plaintext
1 line
5.5 KiB
Plaintext
{"version":3,"sources":["kr-dark.js"],"names":["darkmodeCss","document","getElementById","darkModeStorageKey","getLS","k","localStorage","getItem","e","getModeFromCSSMediaQuery","window","matchMedia","matches","validColorModeKeys","dark","light","emitColorMode","mode","currentSetting","systemTheme","documentElement","setAttribute","removeItem","removeLS","removeAttribute","invertDarkModeObj","toggleColorMode","v","setItem","setLS","krDarkInit","removeEventListener","addEventListener","readyState","setTimeout"],"mappings":"AAAA,cAMA,WACI,IAAMA,EAAcC,SAASC,eAAe,gBACtCC,EAAqB,oBAyBrBC,EAAQ,SAACC,GACX,IACI,OAAOC,aAAaC,QAAQF,GAC9B,MAAOG,GAEL,OAAO,OAOTC,EAA2B,WAC7B,OAAOC,OAAOC,WAAW,gCAAgCC,QACnD,OACA,SAMJC,EAAqB,CACvBC,MAAQ,EACRC,OAAS,GAMPC,EAAgB,SAACC,GACnB,IAAIC,EAAiBD,GAAQb,EAAMD,GAC7BgB,EAAcV,IAQpB,OANAR,SAASmB,gBAAgBC,aAAa,aAAcH,GAAkBC,GAEjEN,EAAmBK,IAAmBA,IAAmBC,KA7CjD,SAACd,GACd,IACIC,aAAagB,WAAWjB,GAC1B,MAAOG,KA2CLe,CAASpB,GACTe,EAAiB,MAEbA,GACJ,IAAK,OACDlB,EAAYqB,aAAa,QAAS,OAClCrB,EAAYwB,gBAAgB,YAC5B,MACJ,IAAK,QACDxB,EAAYqB,aAAa,WAAY,YACrC,MACJ,QACIrB,EAAYqB,aAAa,QAAS,gCAClCrB,EAAYwB,gBAAgB,cAKlCC,EAAoB,CACtBX,KAAQ,QACRC,MAAS,QAMPW,EAAkB,WACpB,IAAIR,EAAiBd,EAAMD,GAO3B,OALIe,EADAL,EAAmBK,GACFO,EAAkBP,GAElBO,EAAkBhB,KAvF7B,SAACJ,EAAGsB,GACd,IACIrB,aAAasB,QAAQvB,EAAGsB,GAC1B,MAAOnB,KAsFTqB,CAAM1B,EAAoBe,GACnBA,GAIXF,IAEA,IAAMc,EAAa,SAAbA,IACF7B,SAAS8B,oBAAoB,mBAAoBD,GAAY,GAC7DpB,OAAOqB,oBAAoB,OAAQD,GAAY,GAEjB7B,SAASC,eAAe,mBAChC8B,iBAAiB,SAAS,WAC5ChB,EAAcU,SAIM,aAAxBzB,SAASgC,WACTC,WAAWJ,IAEX7B,SAAS+B,iBAAiB,mBAAoBF,GAAY,GAC1DpB,OAAOsB,iBAAiB,OAAQF,GAAY,IArHpD","file":"../js/kr-dark.min.js","sourcesContent":["/*\n * Reference: \n * - [你好黑暗，我的老朋友 —— 为网站添加用户友好的深色模式支持 by Sukka]\n * (https://blog.skk.moe/post/hello-darkmode-my-old-friend/)\n */\n// 作为直接影响渲染的脚本，应该在最开始就加载，不应该defer\n(() => {\n const darkmodeCss = document.getElementById('darkmode-css')\n const darkModeStorageKey = 'user-color-scheme';\n\n /**\n * 设置 LocalStorage 的指定属性\n */\n const setLS = (k, v) => {\n try {\n localStorage.setItem(k, v);\n } catch (e) {\n // (此处不进行处理)\n }\n };\n /**\n * 移除 LocalStorage 的指定属性\n */\n const removeLS = (k) => {\n try {\n localStorage.removeItem(k);\n } catch (e) {\n // (此处不进行处理)\n }\n };\n /**\n * 获取 LocalStorage 的指定属性\n */\n const getLS = (k) => {\n try {\n return localStorage.getItem(k);\n } catch (e) {\n // 与 localStorage 中没有找到对应 key 的行为一致\n return null;\n }\n };\n\n /**\n * 获取当前生效的显示模式（深色/浅色）名称\n */\n const getModeFromCSSMediaQuery = () => {\n return window.matchMedia('(prefers-color-scheme: dark)').matches\n ? 'dark'\n : 'light'\n };\n\n /**\n * 校验key\n */\n const validColorModeKeys = {\n 'dark': true,\n 'light': true\n };\n\n /**\n * 提交指定的深色/浅色显示模式的设置\n */\n const emitColorMode = (mode) => {\n let currentSetting = mode || getLS(darkModeStorageKey);\n const systemTheme = getModeFromCSSMediaQuery();\n // 在 html tag 上设置主题颜色，方便第三方插件读取使用\n document.documentElement.setAttribute('data-theme', currentSetting || systemTheme);\n // 检查是否无效或可以被忽略\n if (!validColorModeKeys[currentSetting] || currentSetting === systemTheme) {\n removeLS(darkModeStorageKey); //reset\n currentSetting = null;\n }\n switch (currentSetting) {\n case \"dark\":\n darkmodeCss.setAttribute('media', 'all');\n darkmodeCss.removeAttribute('disabled');\n break;\n case \"light\":\n darkmodeCss.setAttribute('disabled', 'disabled');\n break;\n default:\n darkmodeCss.setAttribute('media', '(prefers-color-scheme: dark)');\n darkmodeCss.removeAttribute('disabled');\n break;\n }\n };\n\n const invertDarkModeObj = {\n 'dark': 'light',\n 'light': 'dark'\n };\n\n /**\n * 切换显示模式（深色/浅色）\n */\n const toggleColorMode = () => {\n let currentSetting = getLS(darkModeStorageKey);\n if (validColorModeKeys[currentSetting]) {\n currentSetting = invertDarkModeObj[currentSetting];\n } else {\n currentSetting = invertDarkModeObj[getModeFromCSSMediaQuery()];\n }\n setLS(darkModeStorageKey, currentSetting);\n return currentSetting;\n };\n\n // 加载页面时即立刻提交一次\n emitColorMode();\n\n const krDarkInit = () => {\n document.removeEventListener(\"DOMContentLoaded\", krDarkInit, false);\n window.removeEventListener(\"load\", krDarkInit, false);\n\n const darkModeSwitchElement = document.getElementById('darkmode-switch');\n darkModeSwitchElement.addEventListener('click', () => {\n emitColorMode(toggleColorMode());\n });\n };\n\n if (document.readyState === \"complete\") {\n setTimeout(krDarkInit);\n } else {\n document.addEventListener(\"DOMContentLoaded\", krDarkInit, false);\n window.addEventListener(\"load\", krDarkInit, false); //fallback\n }\n})();\n"]} |