a11y: Add dark mode coverage verification for all UI components

[Xhristin3]

Problem Statement

The app supports dark mode via next-themes with CSS variable switching, but only one component has dark mode test coverage. No systematic verification that all 28+ Radix UI components render correctly in both dark and light themes.

Evidence

Only stream-status-badge.test.tsx exists. No visual regression testing. Theme toggle exists but no automated theme-switching tests.

Impact

Components may have broken contrast, invisible text, or missing borders in dark mode. These issues go undetected until user reports.

Proposed Solution

1. Add visual regression tests (Chromatic or Percy) that capture both light and dark mode
2. Or add component-level tests that render in both ThemeProvider modes and verify accessibility
3. At minimum, add a test that renders every shadcn/ui component in both themes and checks for console errors

Acceptance Criteria

• Each custom component tested in both light and dark mode
• No contrast issues in dark mode
• ThemeProvider wraps all visual tests

File Map

• app/components/ui/*.test.tsx — dark mode variants
• app/components/theme-provider.tsx — may need test wrapper export

---

Labels: accessibility, enhancement
Priority: Enhancement | Difficulty: Intermediate | Estimated Effort: 2d

---

Labels: accessibility
Priority: Enhancement | Difficulty: Intermediate | Estimated Effort: 2d
Backlog ID: REPO-050

[abdullahilateefat03-boop]

Hello maintainer,
I’m interested in taking up this issue. I have experience in Full-stackweb development. After reviewing the issue requirements, I believe I can implement a proper solution and follow the project guidelines.
Kindly assign the issue to me.
Thanks.

[Meet-hybrid]

Can I work on this please?

[Uche44]

Here's how I'd approach this problem:

This issue is about making sure all UI components work correctly in both light mode and dark mode, and catching theme-related problems before they reach users.

I'll creatie a shared test setup that wraps components with the application's ThemeProvider so every visual component can be rendered in both themes during testing. Existing UI components under app/components/ui should then receive theme-specific test coverage.

For each component, render it once in light mode and once in dark mode. Verify that it renders successfully without console errors, missing styles, accessibility violations, or broken states. Components that rely on CSS variables, Radix primitives, or shadcn/ui styling should be specifically checked because theme issues often appear there first.

If the project already uses a visual testing platform such as Chromatic or Percy, add visual regression snapshots for both themes. This helps detect contrast issues, invisible text, missing borders, and layout regressions automatically. If visual regression tooling is not available, component-level tests should at least validate rendering behavior and accessibility in both modes.

The implementation may require exporting a reusable test wrapper from app/components/theme-provider.tsx so tests can easily switch between light and dark themes.

Acceptance criteria would be satisfied by ensuring every custom UI component has theme coverage, all visual tests are wrapped by ThemeProvider, no dark mode accessibility or contrast issues are found, and automated tests verify components behave correctly when themes change.

Files likely affected include app/components/ui/*.test.tsx for the new theme tests and app/components/theme-provider.tsx if a reusable testing wrapper is needed.

Let me handle this for you.

[gregemax]

Hi Maintainer,

I’d love to work on this issue. I’ve reviewed the requirements and believe I can implement the solution according to the project’s guidelines and best practices.

If the issue is available, I’d be happy to take ownership and submit a PR for review.

Thank you for your consideration.

[Franker24]

Hi! I would like to contribute to this issue.

I'm a Fullstack Developer with experience building React and TypeScript applications, working with reusable UI components, responsive interfaces, and frontend quality improvements.

I can help add dark mode coverage verification for the UI components by creating component tests with the proper ThemeProvider setup and ensuring components render correctly in both light and dark themes.

I have experience working with modern frontend testing practices and can help improve accessibility and reliability by preventing theme-related UI regressions.

I would be happy to contribute to this accessibility improvement.

[Marvy247]

Can I work on this issue please?

[MerlinTheWhiz]

Hello, I'm MerlinThewhiz, a software engineer with a couple years of experience in my arsenal. Having read the task requirement, I'd love to work on this issue.
Please assign.

[grantfox-oss]

🦊 GrantFox — @MerlinTheWhiz has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #233)
2. Your PR will be reviewed by the XStreamRollz maintainers

Good luck! Track your progress on GrantFox.