Skip to content

fix: keep active sidebar label readable across themes - #5

Merged
LizAinslie merged 1 commit into
mainfrom
fix/active-sidebar-contrast
Sep 14, 2026
Merged

LizAinslie merged 1 commit into
mainfrom
fix/active-sidebar-contrast

Conversation

@LizAinslie

Copy link
Copy Markdown
Contributor

Problem

Sidebar.astro marks the active item with menu-active bg-base-100. daisyUI's .menu-active sets color: var(--color-neutral-content), and the unlayered bg-base-100 utility only overrides the background. In themes where neutral-content and base-100 are both dark (or both light), the active label becomes unreadable — kolektiv-dark ≈1.11:1, nord ≈1.17:1, daisyUI Light ≈1.27:1.

Change

  • Add text-base-content to the active class list so the pill keeps bg-base-100 with the guaranteed base-content foreground.
  • Add an unlayered safety rule in src/styles/chrome.css: .menu a[aria-current='page'] { color: var(--color-base-content); }. It is scoped to aria-current, so SearchDialog hits (no aria-current) keep daisyUI's readable neutral/neutral-content pair.
  • Comment the pairing so it is not "cleaned up" later.

Verification

Contrast (WCAG) of the active label, before → after:

Theme Before After
kolektiv-dark 1.11:1 17.61:1
nord 1.17:1 10.84:1
daisyUI Light 1.27:1 17.73:1
catppuccin-mocha 12.97:1 12.97:1

Playground built HTML active anchor class changed only by adding text-base-content. pnpm test (66 passed), pnpm typecheck, pnpm build and the playground build all pass.

@LizAinslie
LizAinslie merged commit 95f7730 into main Sep 14, 2026
1 check passed
@LizAinslie
LizAinslie deleted the fix/active-sidebar-contrast branch September 14, 2026 10:27
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