Repository navigation
Toggle Light Dark at 03-claude-tetris #7
Description
Activity
🤖 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:inputis 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(#boardborder/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 highlightrgba(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()anddrawNext()are redrawn every frame byloop, so a theme change is picked up automatically. While paused or on game over the loop is cancelled, so an explicitdraw()/drawNext()call is needed.index.htmlhas no toggle control, and thekeydownhandler (game.js:277) is the only input path.
Suggested implementation approach
- 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 withvar(--...). - In
index.html, add a toggle button (e.g.<button id="theme-toggle">) in the wrapper or panel, with an accessible label andaria-pressed. - In
game.js, add atheme-toggleelement constant at the top (per the id-lookup convention in CLAUDE.md). Setdocument.documentElement.dataset.themeon click. Default to'dark'on load. Optionally persist the choice inlocalStorageand fall back to dark if nothing is stored. - Make
drawGridread its stroke color viagetComputedStyle(document.documentElement).getPropertyValue('--grid'). Cache the value and refresh it on toggle rather than reading it every frame. - After a toggle, call
draw()anddrawNext()so the canvases update while paused or after game over. - Make sure the toggle button doesn't steal keyboard input. Blur it after click so Space (hard drop) doesn't re-trigger it.
- If needed, tune the piece colors or ghost alpha for light mode (e.g. a second
COLORSpalette selected by theme). - Update
CLAUDE.mdand the README to mention the theme toggle and the new DOM id.
Acceptance criteria / how to verify
Serve withpython3 -m http.server 8000and 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,
kbdhints,NEXTcanvas, 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 followprefers-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?
- Type:
@claude implement the solution for this requirement with the best practices.
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:rootvalues 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-togglewitharia-pressedand an accessible label.game.js:applyTheme()setsdata-themeon<html>and swaps the piece palette.- A new
LIGHT_COLORSpalette uses deeper tones, so pieces and the ghost stay visible on a white board. - The canvas grid color is read from
--gridand cached. draw()anddrawNext()are called after a toggle, so a paused or game-over board repaints immediately.- The choice is saved in
localStorageundertetris-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.mdandREADME.md: documented the theme feature and the new DOM ids.
Not verified: I couldn't run
node --checkor open the page in a browser in this environment, so none of this has been run. Please try it withpython3 -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
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.