Skip to content

feat: add light/dark mode toggle#38

Open
andrewhopper wants to merge 2 commits intomasterfrom
claude/issue-25-20260303-1347
Open

feat: add light/dark mode toggle#38
andrewhopper wants to merge 2 commits intomasterfrom
claude/issue-25-20260303-1347

Conversation

@andrewhopper
Copy link
Owner

Adds a light/dark mode toggle to the QuickView UI.

  • Light mode CSS variables (shadcn/ui tokens) as a .light class
  • Toggle button (☀️/🌙) in the header
  • Persists preference in localStorage, falls back to system preference

Closes #25

Generated with Claude Code

- Add light mode CSS variables (shadcn/ui light theme tokens) as .light class
- Add theme toggle button to the header
- Persist theme preference in localStorage
- Initialize from saved preference or system prefers-color-scheme

Closes #25

Co-authored-by: Andrew Hopper <andrewhopper@users.noreply.github.com>
@andrewhopper
Copy link
Owner Author

@claude fix the conflicts

@claude
Copy link

claude bot commented Mar 3, 2026

Claude finished @andrewhopper's task in 6m 41s —— View job


Conflicts Fixed

  • Gather context and understand request
  • Check current conflict state
  • Read CLAUDE.md for repo guidelines
  • Apply light/dark mode changes to master's new file versions
  • Commit and push resolved changes

What was done:

The conflicts were caused by PR #35 merging a completely restructured version of the frontend (modular ES6 with imports) while this PR still had the old monolithic architecture.

Resolution (1ecb30a):

  • app.js: Ported to the new modular ES6 architecture from master, adding setupTheme() and applyTheme() methods to the new QuickViewApp class structure. setupTheme() is now called in the constructor before other setup.
  • index.html: The theme toggle button was already present; fixed the <script> tag to use type="module" since the new app.js uses ES6 imports (this is required for modules to work).
  • style.css: Already had the correct .light class variables — no changes needed.
    |

Resolve conflicts with master (PR #35) by updating app.js to the new
modular ES6 architecture while preserving the light/dark mode toggle.
Also fix index.html to load app.js as a module (type="module").

Co-authored-by: Andrew Hopper <andrewhopper@users.noreply.github.com>
@andrewhopper
Copy link
Owner Author

@claude - resolve the conflicts

@claude
Copy link

claude bot commented Mar 9, 2026

Claude finished @andrewhopper's task in 4m 28s —— View job


Conflict Analysis Complete

  • Gather context and check current branch state
  • Read CLAUDE.md for repo guidelines
  • Identify conflicts and root cause
  • Resolve conflicts (see instructions below)

What's Happening

The PR branch (claude/issue-25-20260303-1347) and master have no common ancestor — they are completely unrelated histories. This happened because PR #53 introduced a full TypeScript/React rewrite of the app, creating a fresh git history that doesn't connect to this PR's older history.

Good news: master already has the dark mode feature fully implemented:

  • quickview-tool/src/client/hooks/useTheme.ts — dark/light mode logic with localStorage persistence
  • quickview-tool/src/client/components/Header.tsx — Sun/Moon toggle button (☀️/🌙)
  • quickview-tool/src/client/index.css — dark mode CSS variables

To Resolve

The git merge --allow-unrelated-histories command requires interactive approval that isn't available in CI. Run these commands locally:

git fetch origin
git checkout claude/issue-25-20260303-1347
git merge origin/master --allow-unrelated-histories -m "chore: resolve conflicts by merging master TypeScript rewrite"
git push origin claude/issue-25-20260303-1347

This will combine both histories and make the PR mergeable. Since master already has dark mode implemented, the PR effectively adds no new code changes — the feature is already in master via useTheme.ts.

Alternative: Since the feature is already in master, you could simply close this PR as superseded by #53.

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 light/dark mode option

1 participant