0.1.126 这次更新导致后台系统设置在dark模式下顶部菜单栏还是白色背景

Open Beginner friendly
#2,398 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
css, javascript
Domain
frontend

Research direction

Start in frontend/src/views/admin/SettingsView.vue and inspect the settings-tabs-shell and settings-tab dark-mode rules, then compare the generated selector in the built CSS. Make the dark selectors target the settings tab elements, and verify the settings page top navigation in both light and dark modes after rebuilding the frontend.

Written by the indexing model from the issue text.

Description

确实是 0.1.126 这次“系统设置页标签导航优化”引入的前端样式回归。

具体原因
0.1.126 把系统设置页顶部标签栏从旧实现改成了新的 settings-tabs-shell / settings-tab 这一套样式。

源码里本来是想这样写深色覆盖：

• frontend/src/views/admin/SettingsView.vue
• .settings-tabs-shell { ... bg-white/90 ... }
• :global(.dark) .settings-tabs-shell { background: rgb(15 23 42 / 0.86); ... }

但我刚查了线上实际打包后的 CSS chunk：

• http://127.0.0.1:8080/assets/SettingsView-DlYf6CI6.css

里面变成了这种结果：

• 正常浅色规则还在：
• .settings-tabs-shell[data-v-ab2484fe]{ ... background-color:#ffffffe6 ... }
• 本应只作用于深色设置栏的覆盖规则，被错误编译成了裸 .dark{...}
• 不是 .dark .settings-tabs-shell[...] { ... }
• 所以它没有命中这个顶部标签栏元素

结果就是：

• 浅色默认白底规则生效
• 深色覆盖没真正覆盖到这个标签栏
• 于是看到“系统设置页顶部这块背景发白”

为什么我现在能确认是它

  1. 0.1.125 -> 0.1.126 的 diff 里，系统设置页顶部导航这块确实被重构了
  2. 问题只出现在“系统设置页顶部这块”，和这次改动范围完全一致
  3. 线上产物里已经能直接看到错误编译后的 dark 选择器，这就是实锤

补一句
这不是全站 dark mode 坏了，而是这个页面这组 scoped CSS 的 dark 覆盖写法出了问题；而且不止外层壳子，settings-tab::before、settings-tab-active 那几处深色覆盖也一起受影响了。
正式根治方案

思路
直接修 frontend/src/views/admin/SettingsView.vue，不要再让这组 dark 规则留在 scoped 里用当前写法。

建议改法
把“系统设置 Tab 导航”这一段样式从当前 scoped <style> 中拆出去，放到：

• 一个非 scoped 的 <style> 块，或
• frontend/src/style.css

并把 dark 选择器明确写成：

html.dark .settings-tabs-shell { ... }
html.dark .settings-tab::before { ... }
html.dark .settings-tab-active { ... }
html.dark .settings-tab-active .settings-tab-icon { ... }

Dominant language
Go
Stars
42.1k
Forks
9k
Avg merge
1d 14h
Merged PRs (30d)
343

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Wei-Shaw/sub2api

All issues in Wei-Shaw/sub2api

Similar issues

More Go issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.