Customization

interface Theme {
  id: string;
  name: string;
  description?: string;
  author?: string;
  version?: string;
  isBuiltIn: boolean;
  
  // Core properties
  scale: number;                // UI scale factor (0.8 - 1.2)
  fontSmoothing: boolean;
  focusRing: 'auto' | 'always' | 'never';
  
  // Colors
  white: string;                // Background color for light mode
  black: string;                // Background color for dark mode
  colors: ThemeColors;          // Color palette
  primaryShade: { light: number; dark: number };
  primaryColor: string;
  autoContrast: boolean;
  luminanceThreshold: number;
  
  // Typography
  fontFamily: string;
  fontFamilyMonospace: string;
  headings?: ThemeHeadings;
  
  // Layout
  defaultRadius: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  
  // Component overrides
  components?: ThemeComponents;
}

type ColorScheme = 'light' | 'dark' | 'auto';

// Auto mode follows system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

import { useAtom } from 'jotai';
import { pieceSetAtom } from '@/state/atoms';

const [pieceSet, setPieceSet] = useAtom(pieceSetAtom);

// Available piece sets
const sets = [
  'staunty', 'merida', 'alpha', 'california',
  'cardinal', 'companion', 'cburnett', 'chess7',
  'chessnut', 'disguised', 'dubrovny', 'fantasy',
  'fresca', 'gioco', 'governor', 'horsey',
  'icpieces', 'kosal', 'leipzig', 'letter',
  'libra', 'maestro', 'pirouetti', 'pixel',
  'reillycraig', 'riohacha', 'shapes', 'spatial',
  'tatiana'
];

setPieceSet('merida');

interface BoardTheme {
  lightSquare: string;   // Light square color (hex)
  darkSquare: string;    // Dark square color (hex)
  coordinates: boolean;  // Show file/rank labels
  showLastMove: boolean; // Highlight last move
  showLegalMoves: boolean; // Show legal move indicators
}

const boardTheme: BoardTheme = {
  lightSquare: '#f0d9b5',
  darkSquare: '#b58863',
  coordinates: true,
  showLastMove: true,
  showLegalMoves: true
};

const highlightColors = {
  lastMove: 'rgba(155, 199, 0, 0.41)',
  check: 'rgba(255, 0, 0, 0.41)',
  selected: 'rgba(20, 85, 30, 0.5)',
  premove: 'rgba(20, 30, 85, 0.5)'
};

import { useAtom } from 'jotai';
import { soundSetAtom, soundEnabledAtom, soundVolumeAtom } from '@/state/atoms';

const [soundSet, setSoundSet] = useAtom(soundSetAtom);
const [enabled, setEnabled] = useAtom(soundEnabledAtom);
const [volume, setVolume] = useAtom(soundVolumeAtom);

// Configure sounds
setSoundSet('piano');
setEnabled(true);
setVolume(0.7);  // 70% volume

type Density = 'comfortable' | 'compact' | 'spacious';

const [density, setDensity] = useAtom(densityAtom);

// Affects:
// - Padding/margins
// - Font sizes  
// - Line heights
// - Component spacing
setDensity('compact');  // More info on screen

// Using Jotai's atomWithStorage
import { atomWithStorage } from 'jotai/utils';

export const pieceSetAtom = atomWithStorage<string>('piece-set', 'staunty');
export const currentThemeIdAtom = atomWithStorage<string>('current-theme-id', 'default');
export const colorSchemeAtom = atomWithStorage<ColorScheme>('color-scheme', 'dark');

import { useSetAtom } from 'jotai';
import { RESET } from 'jotai/utils';

const resetPieceSet = useSetAtom(pieceSetAtom);
const resetTheme = useSetAtom(currentThemeIdAtom);
const resetColorScheme = useSetAtom(colorSchemeAtom);

// Reset individual settings
resetPieceSet(RESET);
resetTheme(RESET);
resetColorScheme(RESET);

// Or clear all localStorage
localStorage.clear();

const highContrastTheme: Theme = {
  // ...
  autoContrast: true,
  luminanceThreshold: 0.5,  // Higher = more contrast
  colors: {
    // WCAG AAA compliant colors
  }
};

<button aria-label="Start engine analysis">
  <EngineIcon />
</button>

<div role="region" aria-label="Chess board" tabIndex={0}>
  {/* Board */}
</div>