Add a dark theme, default, with a switch in the top bar
Deploy to GitHub Pages / build (push) Canceled after 0s
Deploy to GitHub Pages / deploy (push) Canceled after 0s

Colours move into theme tokens (light values in :root, dark in
[data-theme=dark]); the closing contact band inverts on each theme. The
choice is stored in localStorage and applied by a head script before the
first paint. Voxel covers and image shadows follow the theme.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9
This commit is contained in:
Emil
2026-09-20 22:51:13 +03:00
co-authored by Claude Sonnet 5
parent 0c95e0c5d0
commit 15d36d6437
11 changed files with 206 additions and 38 deletions
+6 -6
View File
@@ -26,7 +26,7 @@ const GRID = 5
const TILE = 54
const RISE = 30
const ACCENTS = ['#e0384b', '#5aa300', '#2c63e0']
const NEUTRAL = { top: '#f9fafb', left: '#d6dbe2', right: '#b8c0cb' }
const NEUTRAL = { top: 'var(--cube-top)', left: 'var(--cube-left)', right: 'var(--cube-right)' }
function mix(hex: string, other: number, amount: number): string {
const channel = (i: number) => parseInt(hex.slice(1 + i * 2, 3 + i * 2), 16)
@@ -82,7 +82,7 @@ export default function Cover({ name }: Readonly<{ name: string }>) {
key={n}
points={face([point(i, j, 0, 0, 0), point(i, j, 0, TILE / 2, TILE / 4), point(i, j, 0, 0, TILE / 2), point(i, j, 0, -TILE / 2, TILE / 4)])}
fill="none"
stroke="rgba(21,24,29,0.09)"
style={{ stroke: 'var(--cover-grid)' }}
/>
)
})}
@@ -90,10 +90,10 @@ export default function Cover({ name }: Readonly<{ name: string }>) {
const z = (k + 1) * RISE
const base = k * RISE
return (
<g key={`${i}-${j}-${k}`} strokeLinejoin="round" stroke="rgba(21,24,29,0.16)" strokeWidth="0.75">
<polygon points={face([point(i, j, z, -TILE / 2, TILE / 4), point(i, j, z, 0, TILE / 2), point(i, j, base, 0, TILE / 2), point(i, j, base, -TILE / 2, TILE / 4)])} fill={left} />
<polygon points={face([point(i, j, z, 0, TILE / 2), point(i, j, z, TILE / 2, TILE / 4), point(i, j, base, TILE / 2, TILE / 4), point(i, j, base, 0, TILE / 2)])} fill={right} />
<polygon points={face([point(i, j, z, 0, 0), point(i, j, z, TILE / 2, TILE / 4), point(i, j, z, 0, TILE / 2), point(i, j, z, -TILE / 2, TILE / 4)])} fill={top} />
<g key={`${i}-${j}-${k}`} strokeLinejoin="round" strokeWidth="0.75" style={{ stroke: 'var(--cube-edge)' }}>
<polygon points={face([point(i, j, z, -TILE / 2, TILE / 4), point(i, j, z, 0, TILE / 2), point(i, j, base, 0, TILE / 2), point(i, j, base, -TILE / 2, TILE / 4)])} style={{ fill: left }} />
<polygon points={face([point(i, j, z, 0, TILE / 2), point(i, j, z, TILE / 2, TILE / 4), point(i, j, base, TILE / 2, TILE / 4), point(i, j, base, 0, TILE / 2)])} style={{ fill: right }} />
<polygon points={face([point(i, j, z, 0, 0), point(i, j, z, TILE / 2, TILE / 4), point(i, j, z, 0, TILE / 2), point(i, j, z, -TILE / 2, TILE / 4)])} style={{ fill: top }} />
</g>
)
})}