/* ============================================================================ * Board color themes * ---------------------------------------------------------------------------- * chessground paints the whole checkerboard as ONE background on * (see chessground.brown.css — a light bg-color + an SVG that darkens half the * squares). We replace that with a CSS-variable-driven conic-gradient so a theme * is just two hues: --cg-light / --cg-dark. The pair is chosen by data-board on * (persisted by SCPrefs in _Head.cshtml). This file loads AFTER * chessground.brown.css so this rule wins. * ========================================================================== */ cg-board { background-color: var(--cg-light); /* One conic tile = a 2×2 checker; tiled at 25% gives the 8×8 board. a1 (each tile's bottom-left quadrant) lands on --cg-dark, as it should. */ background-image: conic-gradient( var(--cg-dark) 90deg, var(--cg-light) 90deg 180deg, var(--cg-dark) 180deg 270deg, var(--cg-light) 270deg ); background-size: 25% 25%; } /* Default = brown (matches the board before themes existed). */ :root, :root[data-board='brown'] { --cg-light: #f0d9b5; --cg-dark: #b58863; } :root[data-board='green'] { --cg-light: #ebecd0; --cg-dark: #6f9350; } :root[data-board='blue'] { --cg-light: #e2e8f0; --cg-dark: #7a9cc4; } :root[data-board='grey'] { --cg-light: #e6e6e6; --cg-dark: #9c9c9c; } :root[data-board='purple'] { --cg-light: #ece5f6; --cg-dark: #9575cd; } :root[data-board='walnut'] { --cg-light: #e4c8a0; --cg-dark: #7a5232; } :root[data-board='maple'] { --cg-light: #f3ddb3; --cg-dark: #c4894e; } :root[data-board='marble'] { --cg-light: #e8e5de; --cg-dark: #a9a59a; } :root[data-board='midnight'] { --cg-light: #6b7a99; --cg-dark: #2c3652; } :root[data-board='ocean'] { --cg-light: #cfe6ec; --cg-dark: #4f8aa6; }