Fix: active settings segment button loses its accent background in dark mode

オープン 初心者向け
  • 何か問題がありますか？
#374 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
65/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css, typescript
領域
frontend

調査の方向性

TaskFlow.Web/src/index.css 内の競合するルールと、index.css.test.ts 内のソースコントラクトテストを読みます。既存のテスト規約を確認し、続いて、ライトモードの外観を変更せずに、ダークモードのアクティブルールがダークモードのデフォルトルールより優先されることを検証します。テストでアクティブなアクセント背景と非アクティブな半透明背景を検証できれば完了です。記載のとおり、#373 と同時か、その後に取り込まれるよう調整してください。

索引モデルが issue の本文から書いたものです。

説明

bug

Found while grooming #326 (contrast audit); confirmed by reading TaskFlow.Web/src/index.css on main at 5405774. Not yet reproduced in a browser.

Problem

In dark mode the active settings segment button never gets its accent background. Two rules compete:

html.is-dark .settings-seg-btn {          /* index.css:697, specificity 0-2-1 */
  background: rgba(255, 255, 255, .07);
}
.settings-seg-btn.is-active {             /* index.css:700, specificity 0-2-0 */
  background: var(--accent);
  color: #fff;
}

The dark-mode rule has higher specificity (0-2-1 against 0-2-0), so .is-active loses the cascade and the active segment keeps the faint translucent background, with only the white label (color: #fff still applies) to mark it.

Suggested fix

Raise the active rule above the dark-mode rule, for example html.is-dark .settings-seg-btn.is-active (0-3-1) alongside the existing .settings-seg-btn.is-active, or scope the dark default so it does not match .is-active. Keep the light-mode appearance unchanged.

Acceptance Criteria

  1. Given dark mode, when the settings panel renders a segment control, then the active segment has the accent background (var(--accent)) and the inactive segments keep the translucent background.
  2. Given light mode, then the appearance is unchanged.
  3. Given the CSS source, then a source-contract test in index.css.test.ts asserts the dark-mode active rule exists and outranks the dark-mode default.
  4. Given the label colour on the active segment, then its contrast is handled by #373 (white on accent fails in dark mode for most themes). This issue only restores the background.

Edge Cases

  • Fixing this makes white-on-accent text visible where it is currently hidden by the missing background, so land it together with or after #373 (and #326's --on-accent token) to avoid showing a low-contrast label.
  • Check every page that renders the settings segment control, in every theme.

Out of Scope

  • Contrast of the active label (#373).
  • Redesigning the segment control.
主要言語
C#
スター
1
フォーク
0
平均マージ
2時間 2分
マージ済み PR（30日）
98

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

nevridge/TaskFlow のほかの issue

nevridge/TaskFlow の issue をすべて見る

似ている issue

C# の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。