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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#374 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
65/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Đọc các quy tắc cạnh tranh trong TaskFlow.Web/src/index.css và các bài kiểm thử hợp đồng mã nguồn trong index.css.test.ts. Kiểm tra các quy ước kiểm thử hiện có, sau đó xác minh rằng quy tắc hoạt động của chế độ tối có thứ tự ưu tiên cao hơn quy tắc mặc định của chế độ tối, trong khi giao diện chế độ sáng vẫn giữ nguyên. Hoàn tất khi bài kiểm thử xác nhận nền màu nhấn đang hoạt động và nền bán trong suốt không hoạt động; phối hợp đưa thay đổi vào cùng với hoặc sau #373 như đã ghi chú.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
C#
Star
1
Fork
0
Merge trung bình
2 giờ 2 phút
Pull request đã merge (30 ngày)
98

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của nevridge/TaskFlow

Tất cả issue của nevridge/TaskFlow

Issue tương tự

Thêm issue về C#

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.