Skip to content

fix: use Bootstrap CSS variables in dropdown-checklist for night mode#525

Open
xpoes123 wants to merge 1 commit into
qbreader:mainfrom
xpoes123:a11y/checkbox-menu-night-mode
Open

fix: use Bootstrap CSS variables in dropdown-checklist for night mode#525
xpoes123 wants to merge 1 commit into
qbreader:mainfrom
xpoes123:a11y/checkbox-menu-night-mode

Conversation

@xpoes123

@xpoes123 xpoes123 commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Replaces hardcoded light-mode colors in scss/dropdown-checklist.scss with Bootstrap CSS custom properties so the filter dropdown renders correctly in night mode.

Problem

The .checkbox-menu styles used literal hex values:

  • background-color: #fff — renders as a bright white rectangle in dark mode
  • color: #333 — near-black text that may clash with a dark background
  • hover/focus background-color: #f5f5f5 — same issue

These values were set unconditionally, so night mode had no way to override them.

Changes

  • Replaces #fff with var(--bs-body-bg).
  • Replaces #333 with var(--bs-body-color).
  • Replaces #f5f5f5 hover background with var(--bs-tertiary-bg).

Risk & testing

Bootstrap's default light-mode values for these variables match the original hex literals, so there is no visual change in the default theme. Night mode behavior was verified to render correctly. No JavaScript is touched.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@xpoes123 xpoes123 changed the title a11y: fix checkbox-menu dropdown contrast in night mode fix: use Bootstrap CSS variables in dropdown-checklist for night mode Jun 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant