Add a dark theme, default, with a switch in the top bar
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:
@@ -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>
|
||||
)
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user