[margani]

Closes #874

A player (under #851) found Sudoku hard on the eyes: faint notes, and a "weird blue" on the selected cell. The blue was the game accent #6A8CBF filling the whole selected cell with white digits on it (3.4:1), which also covered that cell's notes (#7C7063, ~2.4:1 on the blue). Notes on the peer shading were 4.0:1.

What changed

• Six board themes behind the gear, row «رنگ جدول» / Board colours: Default (the current look), Paper (warm, low glare), High contrast (black/white, yellow selection), Sage (soft green), Ocean (cool blue-grey), Night (a dark board with amber digits, in both app themes). Each is a set of --sd-* custom properties under [data-sd-theme]: light values once, dark values twice (system and chosen, like breakout/trio). Switching sets one attribute on .sd-wrap; no cell is repainted.
• Selection is now a tint in the theme's colour with a 2px ring, and the cell keeps its own ink. Selected + error keeps the error tint with a ring in the error colour.
• Notes use a darker, theme-matched ink (--sd-note, weight 700) and have no background.
• Your digits were the accent at 3.4:1 on white. Every theme now has a 4.5:1 ink for them.
• The setting is stored as prefs.boardTheme in Sudoku's own store, as highlight is; an unknown or missing value reads as Default. It applies to Classic and Killer.
• The gear row is six 40px swatch buttons (each drawn in its own theme, aria-label, aria-pressed) plus the chosen theme's name below them. Names are in all seven languages.

Proof

tools/tests/sudoku-themes.js (new, 83 checks). It checks:

• exactly six themes, each with light and dark values, and the two dark blocks are equal;
• 4.5:1 for given, player, hint and note digits and Killer sums on every shading they can sit on;
• 3:1 for box lines, cage lines and the selection ring. Default light keeps its box line as it is (Sudoku: keep the strong box lines in the dark theme only #526), so this check skips it;
• ΔE ≥ 6 (CIE76) between the plain, peer, same-digit and selected shadings;
• no background on any notes rule;
• names in every LOCALE_CODES language;
• themeOf reads back each saved theme and falls back to the default.
• Against origin/main's page: 31 checks, 27 failed (exactly six board themes ... (), the selected cell is the theme tint ..., fa: ... missing thLabel ..., ...).
• On this branch: 83 checks, 0 failed.
• node tools/test.js → همه‌ی 9404 بررسی سبز, exit 0.
• tools/browser-check.sh → All pages loaded without console errors (75 of 75), exit 0.
• Playwright at 390×800 (Chrome 152, local server, demo data): all six themes, light and dark, fa and en, with notes, placed digits, one error and a selected digit; the same with a notes cell selected; Killer in Paper and Night; Same digit only; the gear in fa, en and de; the result window in two themes. No console errors, no horizontal scroll. Keyboard: Tab from the gear reaches the swatches, Enter applies Ocean, and a reload keeps it.

Contact sheet (en, digit selected; top: light app theme, bottom: dark app theme):

Notes cell selected:

Not done / not verified

• The share card still draws in the core colours, not the board theme. The result window does not depend on the theme.
• Not tried on a real phone.

🤖 Generated with Claude Code

https://claude.ai/code/session_01QY4t6rHpbsoE5aS15nw6Z7

[margani]

Diff review

Why this shape

• Themes are CSS custom properties under [data-sd-theme] on .sd-wrap, not inline styles set from JS. Switching is one attribute, every colour lives in one place, and the test reads the hex values straight from the page. The theme block is written as light / @media dark / :root[data-theme="dark"], the same pattern as tools/tests/dark-boards.js.
• The selector has no .sd-wrap in it, so the gear swatches carry data-sd-theme themselves and are drawn in their own theme colours, light and dark, without any extra code.
• Default keeps its surfaces (#FFFFFF / #F7F1E8 light, #211C16 / #2A241C dark) and the light box line from :root (var(--c-line), Sudoku: keep the strong box lines in the dark theme only #526). The old :root --sd-box lines are still there, so testSudokuBoxLines passes unchanged.
• Several inks changed in Default to reach 4.5:1:
  • player digits: #6A8CBF (3.4:1) → #355B95 (6.8:1);
  • notes: #7C7063 → #5F5447 (7.4:1, and 5.3:1 when the cell is selected);
  • hint digits: --c-good (3.3:1) → #336A40.
• The selection used to be a solid fill with white text. It is now a tint plus inset 0 0 0 2px ring, so no ink has to switch to white. The two .sd-cell--sel ... #fff rules and the white cage and sum overrides are gone.
• Night is dark in the light app theme as well, on purpose. It is the only theme that gives a dark board on a light page.

Tested

• New group, 83 checks: 27 of 31 fail on origin/main and all 83 pass here.
• Full suite: 9404 green. browser-check: 75 of 75.
• Playwright: 46 screenshots. That covers 6 themes × light/dark × fa/en, plus a notes cell selected, Killer in two themes, Same digit only, the gear in three languages and the result window.
• Keyboard: Tab, then Enter, then reload.
• Computed styles read back from the page match the CSS: .sd-notes background rgba(0, 0, 0, 0), and the selected cell takes the theme tint.

Not tested

• A real phone.
• Firefox.
• The share card. It still uses the core colours and is not themed.