Skip to content

Quick light/dark theme toggle in the app bar - #2

Closed
Prodyte wants to merge 2 commits into
mainfrom
ship/issue-1
Closed

Prodyte wants to merge 2 commits into
mainfrom
ship/issue-1

Conversation

@Prodyte

@Prodyte Prodyte commented Oct 13, 2026

Copy link
Copy Markdown
Owner

Closes #1

Built by the ship workflow: dev, reviewer and qa agents in GitHub Actions. This PR was opened by hand after the run, because the workflow wasn't allowed to create PRs yet (now fixed).

  • Button: sun/moon icon button beside the account button in the phone top bar, and in the navigation on wider screens. Label reads "Switch to dark theme" or "Switch to light theme".
  • Behaviour: flips to the opposite of what is showing; on System it switches away from the OS theme. Saves to nihongo.theme, the same setting as Settings → Theme. Only Settings returns to System.
  • Settings sync: App holds the theme, so the Settings dropdown follows the toggle.
  • Focus ring: reuses the account-button classes, so the global button:focus-visible outline applies.
  • Lessons: lives in the existing top bar and nav, so it's hidden during full-screen lessons.
  • 320px: below 22rem the 日本語 label beside the logo is hidden so the bar fits on one row. This is a CSS estimate; no browser rendered it, so check on a phone before merging.
Round Reviewer QA
1 CHANGES (top bar likely wraps at 320px) PASS
2 APPROVE PASS

Tests: 428 passed, 1 skipped.

Run log: https://github.com/Prodyte/nihongo/actions/runs/38344650864

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@Prodyte

Prodyte commented Oct 13, 2026

Copy link
Copy Markdown
Owner Author

@claude The theme toggle has an aria-label but no tooltip. Add a title with the same text ("Switch to dark theme" / "Switch to light theme") so mouse users see what it does on hover, and cover it in the toggle's tests.

@github-actions

github-actions Bot commented Oct 13, 2026 •

Copy link
Copy Markdown

Claude finished @Prodyte's task in 1m 58s —— View job


Theme toggle tooltip added

  • Read the request and the toggle code
  • Add title matching the aria-label (dev)
  • Cover it in the toggle's tests (qa)
  • Review and QA in parallel
  • Commit and push

The toggle in src/App.tsx now sets title to the same text as its aria-label ("Switch to dark theme" / "Switch to light theme"). The label is computed once and used for both. In src/ThemeToggle.test.tsx, every label check now asserts title as well as aria-label. That covers both states, before and after a click, plus the reload, invalid-stored-theme and Settings-sync tests.

The full suite passed: 428 passed, 1 skipped. Pushed as 3323e24.

Round Reviewer QA
1 APPROVE PASS
· branch ship/issue-1

…s the aria-label, and the toggle's tests check both

Co-authored-by: Pawan <31545438+Prodyte@users.noreply.github.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@Prodyte Prodyte closed this Oct 13, 2026
@Prodyte
Prodyte deleted the ship/issue-1 branch October 13, 2026 04:42
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.

Add Quick light/dark theme toggle in the app bar

1 participant