Skip to content

Harden light and dark theme contrast #107

Description

@ApocDev

PyOps will keep light, dark, and system themes. The switching mechanism is small and healthy; the remaining work is a focused contrast pass.

Current audit:

  • 40 dark: utility tokens across 10 files.
  • 33 tokens are concentrated in seven shared UI primitives, one is app-specific, and six are redundant dark:bg-transparent declarations.
  • Theme unit tests pass 4/4 and the persistence E2E passes 1/1.
  • Desktop and mobile light-mode samples are structurally coherent.
  • Light semantic contrast is below the 4.5:1 normal-text target for primary, success, warning, and info. Primary foreground on the orange action color is also below target in both themes.

Implementation:

  • Tune the light primary, success, warning, and info tokens to preserve their semantic hues while meeting WCAG AA normal-text contrast on page and low-opacity tinted backgrounds.
  • Fix primary action foreground contrast in both themes.
  • Verify muted navigation/tab treatments after theme transitions settle.
  • Remove the six redundant conditional overrides; keep meaningful shared-primitive dark: variants.
  • Add automated computed-style contrast coverage for representative token pairs and rendered routes in light and dark themes.
  • Keep the existing light/dark/system selector, pre-paint behavior, persistence tests, and system preference support.
  • Update the design documentation with the contrast requirement and verification workflow.

Done when shared semantic text/background pairs meet at least 4.5:1 in both themes, representative rendered UI has no unexplained normal-text contrast failures, theme switching still passes, app/docs checks pass, and desktop/mobile visual smoke review finds no regression.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: webWeb UI (React/TanStack/vite-plus)

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions