Toggle Light Dark at 03-claude-tetris

[DanielGeek]

03-claude-tetris: We need to implement a light/dark toggle in our application. It must be in dark mode by default, but the switch should change the mode to light.

[claude]

🤖 Claude Triage

Summary
Add a light/dark theme toggle to the Tetris game. Dark must remain the default, and the switch changes the UI to light mode.

Classification

• Type: enhancement. This is a new feature, not a defect.
• Priority: priority:low. It is a cosmetic, self-contained feature and nothing is broken.
• Areas: area:ui. The change touches CSS, markup and canvas rendering colors. area:input is not needed unless a keyboard shortcut is added (see open questions).

Likely root cause / affected code
No theme support exists. All colors are hard-coded dark-theme values:

• style.css:8-9 (body bg/text), :29 (title), :44-45 (#board border/bg), :68 (labels), :76 (values), :82-83 (#next-canvas), :98 (controls text), :104-110 (kbd), :120 (overlay bg), :141, :147, :152-153 (overlay title/score/button). None of them use CSS variables.
• game.js:172 (drawGrid) hard-codes the grid stroke #22222e. The canvas can't read CSS, so the color must be fetched in JS.
• game.js:166 (drawBlock) uses a white highlight rgba(255,255,255,0.12). It will probably still work on a light background, but check it.
• COLORS (game.js:7-16) are pastel and may have low contrast on a light board. The ghost piece (draw(), alpha 0.2, game.js:188-207) may be hard to see in light mode.
• draw() and drawNext() are redrawn every frame by loop, so a theme change is picked up automatically. While paused or on game over the loop is cancelled, so an explicit draw()/drawNext() call is needed.
• index.html has no toggle control, and the keydown handler (game.js:277) is the only input path.

Suggested implementation approach

1. In style.css, move the colors into CSS custom properties. Define the dark values under :root (default) and light overrides under [data-theme="light"], e.g. --bg, --text, --accent, --board-bg, --border, --label, --muted, --kbd-bg, --overlay-bg, --grid. Replace the hard-coded values listed above with var(--...).
2. In index.html, add a toggle button (e.g. <button id="theme-toggle">) in the wrapper or panel, with an accessible label and aria-pressed.
3. In game.js, add a theme-toggle element constant at the top (per the id-lookup convention in CLAUDE.md). Set document.documentElement.dataset.theme on click. Default to 'dark' on load. Optionally persist the choice in localStorage and fall back to dark if nothing is stored.
4. Make drawGrid read its stroke color via getComputedStyle(document.documentElement).getPropertyValue('--grid'). Cache the value and refresh it on toggle rather than reading it every frame.
5. After a toggle, call draw() and drawNext() so the canvases update while paused or after game over.
6. Make sure the toggle button doesn't steal keyboard input. Blur it after click so Space (hard drop) doesn't re-trigger it.
7. If needed, tune the piece colors or ghost alpha for light mode (e.g. a second COLORS palette selected by theme).
8. Update CLAUDE.md and the README to mention the theme toggle and the new DOM id.

Acceptance criteria / how to verify
Serve with python3 -m http.server 8000 and open the page.

• On first load, with no stored preference, the game is in dark mode and looks identical to today.
• Clicking the toggle switches the page, board, side panel, kbd hints, NEXT canvas, grid lines and game-over overlay to a readable light theme. Clicking again returns to dark.
• All 7 piece colors and the ghost piece are clearly visible in both themes.
• The toggle works mid-game, while paused (P) and on the game-over overlay, and the canvases repaint immediately.
• Pressing Space or the arrow keys after clicking the toggle still controls the game and doesn't re-toggle the theme.
• (If persistence is implemented) the choice survives a reload.

Open questions

• Should the choice persist across reloads (localStorage)? Should it follow prefers-color-scheme? The issue says dark is the default.
• Where should the switch go, and should it be a button, a slider or a keyboard shortcut (e.g. T)?
• Should the piece colors change in light mode, or only the background and chrome?

[DanielGeek]

@claude implement the solution for this requirement with the best practices.

[claude]

Claude finished @DanielGeek's task in 1m 18s —— View job • claude/issue-7-20261001-2059 • Create PR ➔

---

Light/dark toggle implemented

• Read the issue and CLAUDE.md
• Move colors to CSS variables (dark is the default, light under [data-theme="light"])
• Add the toggle button to index.html
• Wire up the theme in game.js
• Update CLAUDE.md and README
• Commit and push

What changed (all in 87-ClaudeCode/03-claude-tetris/)

• style.css: every hard-coded color is now a CSS variable. The :root values are the same as before, so dark mode should look unchanged. A fixed pill-style toggle button sits at the top right.
• index.html: added #theme-toggle with aria-pressed and an accessible label.
• game.js:
  • applyTheme() sets data-theme on <html> and swaps the piece palette.
  • A new LIGHT_COLORS palette uses deeper tones, so pieces and the ghost stay visible on a white board.
  • The canvas grid color is read from --grid and cached.
  • draw() and drawNext() are called after a toggle, so a paused or game-over board repaints immediately.
  • The choice is saved in localStorage under tetris-theme. It falls back to dark if nothing is stored or storage is unavailable.
  • The button is blurred after a click, so Space or Enter doesn't re-trigger it.
• CLAUDE.md and README.md: documented the theme feature and the new DOM ids.

Not verified: I couldn't run node --check or open the page in a browser in this environment, so none of this has been run. Please try it with python3 -m http.server 8000.

Decisions on the triage's open questions (easy to change):

• The choice persists across reloads.
• It does not follow prefers-color-scheme, since the issue says dark is the default.
• The switch is a button with no keyboard shortcut.
• Piece colors change in light mode.

· Branch