Conversation
Switch the design system to CSS `light-dark()` tokens driven by `color-scheme` on `html[data-theme]`. This centralizes light/dark palette resolution, removes the duplicated dark-theme selectors, and keeps the color theme packs working with a single rule per palette while preserving the floating gradient body background in both modes.
Introduce a new "oled" theme color: document and normalize it in src-tauri config (including test), add the OLED label to all locale files, expose an option in SettingsGeneralPanel, and add OLED-specific CSS variables in base.css for a true-black UI variant. Also include small layout.css cleanups (whitespace and change active nav background to use --primary and text to --text-primary).
This updates the classic side navigation for dark mode by removing the extra shadow and tuning the active item background with color-mix so it remains visible without overpowering the theme. It also preserves the icon/text color for active nav entries.
Replace hardcoded rgba with color-mix using --primary so the active nav styling respects design tokens. Swap text color to --text-primary and add fill: currentColor so SVG/icons inherit the color. Add a [data-theme="dark"] rule that increases the color-mix opacity for better contrast in dark mode. Also include minor whitespace cleanup.
kai-orion
marked this pull request as ready for review
September 11, 2026 09:24
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#2388
變更
將 base.css 的設計色票全面改為以 light-dark() 加上 html[data-theme] 的 color-scheme 來驅動，把原本分散在 :root 與 [data-theme="dark"] 的兩套重複定義合併為單一規則，並將 Nord、Tokyo Night、Catppuccin、Gruvbox、Everforest 等顏色主題包也收斂為單規則寫法；同時因 light-dark() 無法直接包裹漸層，將 body 背景拆成 glow 與起訖色變數，讓深淺色共用同一套背景語法並刪除深色 body 特例。
其次新增 OLED 純黑純白主題包，在後端 config.rs 的正規化邏輯與測試、前端設定頁的下拉選單、二十份語系檔的 themeColorOled 文案，以及 base.css 的 OLED 變數中完整接入，將背景壓為純黑白、glow 設為透明並重新調校邊框與文字對比，同時附帶將 classic 側欄的 active 樣式改為以 var(--primary) 為基底。
最後再針對深色模式下的 classic 側欄做修正，移除多餘陰影以避免層次過重，並將 active 背景改為以 color-mix 混合 var(--primary)，淺色用 25%、深色加深至 50%，文字改用 var(--text-primary)，使其在深色下清晰可見又不至於過亮。
示例