Skip to content

ux: improve checkbox contrast in dark theme - #2622

Open
a2580vb wants to merge 1 commit into
sourcegit-scm:developfrom
a2580vb:develop
Open

ux: improve checkbox contrast in dark theme#2622
a2580vb wants to merge 1 commit into
sourcegit-scm:developfrom
a2580vb:develop

Conversation

@a2580vb

@a2580vb a2580vb commented Aug 13, 2026

Copy link
Copy Markdown

Purpose

Improve checkbox contrast in dark theme.

Changes

1. src/Resources/Themes.axaml

Added checkbox-specific resources to both Light and Dark theme dictionaries:

  • Color.CheckBox.Border: Set to #898989 (same as Border1) in the Light theme, and #A8A8A8 (a brighter border for better visibility) in the Dark theme.
  • Brush.CheckBox.CheckedBackground: Remains Transparent in the Light theme, while using the system accent color in the Dark theme.
  • Brush.CheckBox.CheckedBorder: Remains #898989 in the Light theme, while using the system accent color in the Dark theme.
  • Brush.CheckBox.CheckedFG: Uses the system accent color (unchanged) in the Light theme, and white in the Dark theme.

Additionally, Color.CheckBox.Border is registered as the Brush.CheckBox.Border brush in the shared section, and the three checked-state brushes are defined directly as SolidColorBrush instances within each theme dictionary.

2. src/Resources/Styles.axaml

  • Unchecked border brush: Changed from Brush.Border1 to Brush.CheckBox.Border.
  • Added checked state style ^:checked: Uses themed background and border brushes when checked.
  • Check mark icon: Fill changed from the template default Brush.Accent to Brush.CheckBox.CheckedFG.
  • :focus-visible:checked style updated to use the same themed resources.

Result

  • Dark theme: Checked state now uses an accent-colored background with a white check mark, and a brighter border, significantly improving contrast.
  • Light theme: All values remain identical to before; no visual change.

@love-linger love-linger self-assigned this Aug 17, 2026
@love-linger love-linger added the not-planned It's not planned in the future label Aug 17, 2026
@love-linger

Copy link
Copy Markdown
Collaborator
image

This style is used by :checked:focus-within

@a2580vb

a2580vb commented Aug 20, 2026

Copy link
Copy Markdown
Author

You might not be using a Windows machine, So I'd like to share some screenshots for reference. On Windows 11, the appearance before this change looks like this:
image
And after the change:
image
A previous commit adjusted the focus behavior, and I've since pushed an updated version that restores the original focus functionality while keeping the contrast fix intact.

@love-linger

Copy link
Copy Markdown
Collaborator

It's because you system accent color is gray

For example, when your system accent color is blue:

image

you will get:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

not-planned It's not planned in the future

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants