/** * WAISG 颜色布局（暗色模式）前台样式 —— 全站型模块，遵守体积预算。 * * 方案：整页 filter: invert + hue-rotate（主题无关，零适配）。 * - html.waisg-dark-on 反色 + 色相回旋 180°（保持色彩语义：蓝仍偏蓝等）； * - 图片 / 视频 / iframe / 画布 / SVG / 背景图元素二次反色还原本色； * - 悬浮开关按钮用灰阶配色、不做二次反色，随整页那一次反色明暗翻转，图标始终可见。 * 全部作用域收敛在 .waisg-dark-* / html.waisg-dark-on 下，不污染主题其它样式。 */ /* 整页反色（暗色开启时挂在 上；背景补白，避免透明处露出系统色） */ html.waisg-dark-on { filter: invert(1) hue-rotate(180deg); background: #fafafa; } /* 切换动画：仅在首帧之后由 JS 追加 waisg-dark-anim，避免首屏加载时闪一下过渡 */ html.waisg-dark-anim, html.waisg-dark-anim body { transition: filter .28s ease, background-color .28s ease; } /* 二次反色还原：媒体与带背景图的元素回到本色（开关按钮不在此列——见下方说明） */ html.waisg-dark-on img, html.waisg-dark-on video, html.waisg-dark-on iframe, html.waisg-dark-on canvas, html.waisg-dark-on svg, html.waisg-dark-on embed, html.waisg-dark-on object, html.waisg-dark-on [style*="background-image"], html.waisg-dark-on #wpadminbar, html.waisg-dark-on .waisg-dark-keep { filter: invert(1) hue-rotate(180deg); } /* 嵌套还原兜底 + 开关图标豁免： .waisg-dark-keep 内部媒体不再叠加反色；开关按钮的 svg 也从上面的 svg 二次反色里 豁免出来（filter:none），让它只跟随整页那一次反色随明暗翻转，图标始终可见。 */ html.waisg-dark-on .waisg-dark-keep img, html.waisg-dark-on .waisg-dark-keep video, html.waisg-dark-on .waisg-dark-toggle svg { filter: none !important; } /* ── 悬浮开关按钮 ───────────────────────────────────────────── 关键：按钮用「纯灰阶」配色且**不做二次反色**——白底 + 深色图标在浅色态直接可见； 暗色态由整页那一次 invert 自动翻成「深底 + 浅色图标」，同样可见。灰阶反色干净 （无色相、双重反色隐患），彻底避开 iOS / 移动端嵌套 filter 把图标吃成黑块的老问题。 所有关键观感属性 !important 自持，抵御主题的 button / svg 复位规则。 */ .waisg-dark-toggle { position: fixed; z-index: 99999; width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; border: 1px solid rgba(0, 0, 0, .14) !important; border-radius: 50% !important; background: #ffffff !important; color: #222222 !important; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); display: flex !important; align-items: center; justify-content: center; line-height: 0; transition: transform .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; } .waisg-dark-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0, 0, 0, .32); } .waisg-dark-toggle:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; } .waisg-dark-toggle svg { width: 22px !important; height: 22px !important; fill: currentColor !important; visibility: visible !important; opacity: 1 !important; max-width: none !important; } .waisg-dark-toggle svg path { fill: currentColor !important; } /* 按钮位置（四角，边距 20px） */ .waisg-dark-toggle.pos-bottom-right { right: 20px; bottom: 20px; } .waisg-dark-toggle.pos-bottom-left { left: 20px; bottom: 20px; } .waisg-dark-toggle.pos-top-right { right: 20px; top: 20px; } .waisg-dark-toggle.pos-top-left { left: 20px; top: 20px; } /* 图标切换：默认（浅色态）显示月亮，暗色态显示太阳（!important 防主题覆盖 display） */ .waisg-dark-toggle .waisg-dark-moon { display: block !important; } .waisg-dark-toggle .waisg-dark-sun { display: none !important; } html.waisg-dark-on .waisg-dark-toggle .waisg-dark-sun { display: block !important; } html.waisg-dark-on .waisg-dark-toggle .waisg-dark-moon { display: none !important; } /* 按钮外观：方形 / 图标+文字 */ .waisg-dark-toggle.style-square { border-radius: 10px !important; } .waisg-dark-toggle.style-label { width: auto !important; border-radius: 999px !important; padding: 0 16px !important; gap: 8px; } .waisg-dark-label { font-size: 14px; white-space: nowrap; } /* ── 行内切换开关（短代码 [waisg_dark_toggle] / class="waisg-dark-switch"）───── 行内元素，随正文一起被整页反色，无需自持配色；仅给一个可点击的基础观感。 */ .waisg-dark-switch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; line-height: 1.4; cursor: pointer; } .waisg-dark-switch:hover { opacity: .8; }