Skip to content

feat(ui): redesign light and dark theme for cohesion and accessibility #210

@w7-mgfcode

Description

@w7-mgfcode

Summary

Audit and redesign the ForecastLabAI dashboard's light and dark themes across every route for a cohesive, accessible, professionally polished look-and-feel.

Scope

  • Full sweep of every route under frontend/src/pages/ in both light and dark mode.
  • Redesign the theming layer: light/dark semantic-token palette (OKLCH) in frontend/src/index.css.
  • Replace raw Tailwind color utilities and manual dark: overrides with shadcn semantic tokens.

Acceptance criteria

  • Both themes audited per-route with screenshots; defect inventory produced.
  • Redesigned light + dark palette applied via semantic tokens.
  • WCAG AA contrast: body text >= 4.5:1, large/UI >= 3:1, in both themes.
  • No raw color utilities / no manual dark: color overrides remain.
  • pnpm tsc --noEmit && pnpm lint && pnpm test --run green.
  • All existing functionality and layout preserved.

Constraints

Frontend-only. shadcn work goes through the shadcn skill + MCP per .claude/rules/shadcn-ui.md. Browser-verified per .claude/rules/ui-design.md.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions