Add Light/Dark card appearance toggle

[CommitAxis]

Summary

• Adds an Appearance toggle row (Dark / Light buttons) to the UI, styled identically to the existing Platform and Template rows
• Applies a .card-theme-light modifier class to #capture when Light is selected, switching the card to GitHub's actual light-mode palette (white background, #f6f8fa header/footer, #d0d7de borders, dark text)
• applyTemplate() now re-applies the current card theme class after resetting card.className, so switching templates preserves the chosen appearance
• The Terminal template's internal dark window (#0d1117) stays dark even when the card is in light mode

Changes

• index.html — new .card-theme-row div with data-card-theme buttons after .platform-row
• assets/css/styles.css — .card-theme-row/.card-theme-label styles (reusing existing .platform-row pattern) + full .card-theme-light modifier block
• assets/js/app.js — currentCardTheme state, applyCardTheme() function, event binding in bindEvents(), applyTemplate() updated to preserve theme class, applyCardTheme('dark') init call
• assets/js/dom.js — cardThemeButtons added to getElements() return object

Test plan

• "Appearance" row appears below Platform row with Dark (active) and Light buttons
• Clicking Light switches card to white/light-gray palette across all 7 templates
• Clicking Dark restores the original dark card exactly
• Switching templates while in Light mode preserves card-theme-light class
• Switching platform (Mobile/Desktop) while in Light mode preserves the light theme
• Terminal template's internal window stays dark (#0d1117) in Light card mode
• JPEG export in Light mode produces a correctly light-themed 1280×640 image

https://claude.ai/code/session_019mFhzJHWmUB8cTbLksb6ev

Summary by CodeRabbit

• New Features
  • Introduced an "Appearance" toggle for the capture card with Dark and Light visual themes.
  • Card theme can be customized independently from the overall app theme.
  • Light card theme updates card header, footer, title, tiles and controls for a lighter look while preserving the terminal window’s dark appearance.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 19d4163e-39ee-4483-a76b-bd9b7dbe8eb5

📥 Commits

Reviewing files that changed from the base of the PR and between 8a35156 and 2974dfd.

📒 Files selected for processing (2)

• assets/js/app.js
• index.html

---

📝 Walkthrough

Walkthrough

Adds a card appearance toggle: new Dark/Light UI controls, a .card-theme-light CSS variant for card visuals (with terminal exception), DOM wiring for card-theme buttons, and JS state/handlers to apply the chosen card theme independently of the main app theme.

Changes

Cohort / File(s)	Summary
Markup index.html	Added an "Appearance" role group with two .template-btn controls (data-card-theme="dark" and data-card-theme="light") and initial ARIA state.
Styling assets/css/styles.css	Introduced .card-theme-row, .card-theme-label, and .card-theme-light rules that override header, footer, buttons, bento tiles, text, borders, and backgrounds for light card appearance; special-case .card-theme-light .template-terminal keeps terminal UI dark.
DOM selectors assets/js/dom.js	getElements() now returns cardThemeButtons by querying [data-card-theme] alongside existing controls.
App logic assets/js/app.js	Added currentCardTheme state, applyCardTheme(themeName) to toggle .card-theme-light on the capture card and update button ARIA/active state, wired click handlers for card theme buttons, and invoked applyCardTheme('dark') during init.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• [MODERATE] Added Light/Dark card appearance toggle without considering potential accessibility issues #53 — Introduces the same .card-theme-light CSS and references applyCardTheme() changes.
• [MODERATE] Added Light/Dark card appearance toggle without accessibility considerations #54 — Raises accessibility concerns related to the Light/Dark card appearance toggle and the new controls.

Possibly related PRs

• PR #4 — Modifies the same files and code paths; this PR extends that work by adding separate card-theme UI and handlers.
• PR #2 — Earlier refactor of the same modules that this change builds upon (CSS/JS/HTML edits in the same areas).

Suggested labels

codex

Poem

🐰 I fiddled with colors, a hop and a tweak,

Dark stayed cozy while Light took a peek.
Buttons now toggle, the card finds its beam,
One small rabbit for a two-tone dream. 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is comprehensive with a detailed summary, file-by-file changes, and a complete test plan, but does not follow the required template structure with Description, Related Issue(s), Type of Change, Testing Performed, and Checklist sections.	Restructure the description to match the required template format, including explicit sections for Description, Related Issue(s), Type of Change selection, Testing Performed checklist, and final Checklist items.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary change: adding a light/dark card appearance toggle feature.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/add-card-theme-toggle-xXVzh

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

AI Analysis Summary

The added Light/Dark card appearance toggle may introduce accessibility issues. Review the code to ensure it meets accessibility standards. Consider adding ARIA attributes to the toggle buttons to improve screen reader support.

Severity: MODERATE | Role: frontend

Full details: #53