显示问题： 深色模式下，参与抽奖的对话框显示不正常（ReSend）

杂谈 | Lounge
1

这个问题在站务板块已经好久了一直没人回复，干脆直接在杂谈发一次罢
问题描述：​​
在站点的 ​​深色模式​ 下，​​参与抽奖的对话框界面​​ 显示异常。

  • ​​问题现象：​​ 对话框的背景色在深色模式下 ​​未能适配切换，依然保持为白色​​。
  • ​​冲突现象：​​ 然而，对话框内的文字由于深色模式样式的全局影响，​​变成了白色​​。
  • ​​核心问题：​​ 因此，造成了 ​​白色的文字显示在白色的背景上​​，​​色差极小，导致文字内容极难阅读或无法辨认​​（尽管使用 Ctrl+A 全选或依靠老用户的操作习惯可以勉强解决）。
    如图：

image
image1598×897 110 KB

最省事（但有点抽象）的解决方法：
该问题的直接原因在于对话框背景未响应深色模式切换。一个​​最快捷（但有点大病）的临时解决方案​​是直接在相关元素的样式中​​强制固定文字颜色为黑色（#000）​​。

​​比如​​
对包含抽奖文字的 HTML 元素添加 style="color:#000" 属性：

<div class="lottery-ticket-content" data-immersive-translate-walked="***">
            <h3 data-immersive-translate-walked="***" style="color:#000">参与抽奖</h3>
            <p data-immersive-translate-walked="***" style="color:#000">您想购买几张奖券(1奖券消耗1NL)？</p>
            <div class="ticket-input" data-immersive-translate-walked="***">
              <input type="number" id="ticket-quantity" min="1" max="100" value="1" data-immersive-translate-walked="***">
            </div>
            <div class="ticket-actions" data-immersive-translate-walked="***">
              <button class="btn btn-primary confirm-btn" data-immersive-translate-walked="***">确认购买</button>
              <button class="btn btn-flat cancel-btn" data-immersive-translate-walked="***" style="color:#000">取消</button>
            </div>
          </div>

会成这样：

image
image420×250 11 KB

1 个赞
2

如果管理员大大能看到就把这个帖子合并并并回一下吧，已经反馈5天了就一个人回~

3

这是站长改的插件，估计适配没太好，将就着能用，估计不好改吧

4

我排到日程里边 :xhj16:

5

还真是这样

6

如果要省事的话就加个style="color:#000"的事

7

这肯定不行，使用日间模式的要跳脚了，写 var(--secondary) 就好了

2 个赞
8

确实啊 :xhj003:

9

站长轻轻松松修好了 :+1: