注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
?_=1
来访问最新页面。https://mzh.moegirl.org.cn/User:Iskyex/groundglass.js?_=1
(function () { "use strict"; })(); /** * 添加 palette */ const body = document.body; const ul = document.querySelector("#p-views").querySelector("ul"); const palette = document.createElement("li"); palette.id = "palette"; palette.title = "配置面板"; palette.innerHTML = "<span></span><div class='what-panel'><div class='what-mode' title='日夜模式'><span></span></div><div class='what-theme' title='主题颜色'><span></span></div><div class='what-heimu' title='黑幕显隐'><span></span></div></div>"; ul.appendChild(palette); /** * 显示 panel */ const panel = palette.querySelector(".what-panel"); palette.addEventListener("click", function () { panel.classList.toggle("visible"); event.stopPropagation(); }); /** * 阻止点击冒泡 */ panel.addEventListener("click", function () { event.stopPropagation(); }); /** * 切换黑幕 */ const heimu = panel.querySelector(".what-heimu"); heimu.addEventListener("click", function () { localStorage.setItem("what-heimu", body.classList.toggle("heimu_toggle_on")); }); function getHeimu() { const whatHeimu = localStorage.getItem("what-heimu"); if (whatHeimu === "true") { body.classList.add("heimu_toggle_on"); } } /** * 切换颜色 */ const whatThemeColor = ["#95a5a6", "#8fbc8f", "#ffcc66", "#decafb", "#ff6666", "#81c7d4"]; const root = document.documentElement; const theme = panel.querySelector(".what-theme"); var whatThemeColorIndex; var notFirstTimeChangeThemeColor = false; function getIndex() { const localThemeColorIndex = parseInt(localStorage.getItem("what-theme-color-index")); if (localThemeColorIndex && localThemeColorIndex < whatThemeColor.length) { whatThemeColorIndex = localThemeColorIndex; } else { whatThemeColorIndex = 0; } notFirstTimeChangeThemeColor = true; } function changeThemeColor() { if (notFirstTimeChangeThemeColor) { whatThemeColorIndex++; if (whatThemeColorIndex >= whatThemeColor.length) { whatThemeColorIndex = 0; } localStorage.setItem("what-theme-color-index", whatThemeColorIndex); } else { getIndex(); } root.style.setProperty("--theme-color", whatThemeColor[whatThemeColorIndex]); } // 给 theme 按钮添加 theme.addEventListener("click", changeThemeColor); /** * 切换日夜 */ const mode = panel.querySelector(".what-mode"); const modeIcon = mode.querySelector("span"); mode.addEventListener("click", function () { modeIcon.classList.add("icon-spin"); localStorage.setItem("what-dark-mode-on", body.classList.toggle("dark-mode")); }); mode.addEventListener("animationend", function () { modeIcon.classList.toggle("dark"); modeIcon.classList.remove("icon-spin"); }); function getMode() { if (localStorage.getItem("what-dark-mode-on") === "true") { body.classList.add("dark-mode"); modeIcon.classList.add("dark"); } } /** * 全局 */ window.addEventListener("click", function () { // 关闭 panel if (panel.classList.contains("visible")) { panel.classList.remove("visible"); } }); // 阻止目录滚动冒泡 const toc = document.querySelector(".toc"); console.log(toc); if (toc !== undefined && toc !== null) { toc.addEventListener("wheel", function () { event.stopPropagation(); }); } /** * 脚本载入时执行 */ changeThemeColor(); getHeimu(); getMode();