Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Dialogs render with the light theme on dark pages

Closed
#117 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@Aryan-Techie is already working on this.

Since Oct 22, 2026.

  • #125 by @Aryan-Techie — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
design, frontend

Research direction

Start with src/components/ui/dialog.tsx and inspect which theme tokens its dialog surface and form controls use, then compare them with the page theme on /directory. Check both the offer details dialog and eligibility sheet in light and dark mode; done when dialogs match the active theme and text, inputs, selects, and checkboxes remain readable.

Written by the indexing model from the issue text.

Description

Route

/directory (and any page that opens a dialog from src/components/ui/dialog.tsx).

Steps to reproduce

  1. Open /directory with the dark theme (the directory's default look).
  2. Click an offer's description to open its details dialog, or click "Set my eligibility" to open the eligibility sheet.

Actual behavior

The dialog renders as a light panel on the dark page. It uses the shadcn popover tokens instead of the page theme, so it looks out of place and the contrast of its inputs and text changes.

Expected behavior

Dialogs follow the active theme in both light and dark mode, with readable text, inputs, selects, and checkboxes.

Dominant language
TypeScript
Stars
1
Forks
6
Avg merge
21h 33m
Merged PRs (30d)
48

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Your-Voldemort/StudentStack

All issues in Your-Voldemort/StudentStack

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.