ThemeCustomizer

​

Features

• Interactive color selection for key theme properties
• Lock/unlock individual colors to preserve them during generation
• Real-time contrast ratio checking and accessibility validation
• Smart shuffle that generates accessible color palettes
• Light/dark mode toggling with adaptive color adjustment
• Undo/redo functionality
• Export themes to various formats
• Save and load custom themes
• Responsive layout that adapts to viewport size

​

Usage

import { ThemeCustomizer } from '@/components/ThemeCustomizer';

export default function App() {
  return (
    <div>
      {/* Your app content */}
      <ThemeCustomizer />
    </div>
  );
}

​

Component Structure

​

Color Buttons

• Text - Main text color (7:1 contrast target with Background)
• Background - Main background color
• Primary - Primary brand color (3:1 contrast target with Background)
• Container - Container/card background (4.5:1 contrast target with Text)
• Accent - Accent/highlight color (3:1 contrast target with Container)

• The current color value
• A contrast check indicator (pass/warn/fail badge)
• A lock/unlock button for preserving the color
• The color name label

​

State Management

const [lockedColors, setLockedColors] = useState<Set<string>>(new Set());
const [harmonyMode, setHarmonyMode] = useState<HarmonyMode>('complementary');
const [isCompact, setIsCompact] = useState(false);
const [showExportModal, setShowExportModal] = useState(false);
const [showSavedThemesPanel, setShowSavedThemesPanel] = useState(false);

​

Automatic Color Derivation

• Border - Derived from Text and Background (82% mix)
• Muted - Derived from Text and Background (55% mix)
• onPrimary - Automatic contrast color for Primary
• onContainer - Automatic contrast color for Container
• onAccent - Automatic contrast color for Accent
• onSuccess - Automatic contrast color for Success
• onError - Automatic contrast color for Error
• onWarning - Automatic contrast color for Warning

​

Smart Shuffle Algorithm

1. Preserving all locked colors
2. Using the selected harmony mode (complementary, triadic, analogous, etc.)
3. Attempting up to 24 iterations to find an accessible palette
4. Validating contrast ratios against WCAG targets

​

Contrast Validation

​

Responsive Behavior

• Horizontal mode - Fixed position at bottom-center, all buttons in a row
• Compact mode - Fixed position at bottom, spans full width, buttons stacked

​

Keyboard and Mouse Interactions

• Click color button - Opens color picker popover
• Click lock button - Toggles color lock state
• Click outside - Closes color picker popover
• Smart Shuffle button - Generates new accessible palette
• Theme toggle button - Switches between light/dark mode
• Export button - Opens export modal
• Saved themes button - Opens saved themes panel
• Undo/Redo buttons - Navigate theme history

​

Related Components

• ColorPickerPopover - Color selection interface
• ExportModal - Theme export dialog
• SavedThemesPanel - Saved themes browser
• ToolbarButtons - Action buttons in the toolbar
• ColorButton - Individual color selection button (internal)

​

Internal Types

​

ColorButtonData

interface ColorButtonData {
  color: string;          // Current hex color value
  label: string;          // Display label
  property: string;       // Theme property name
  fg: 'text' | 'primary' | 'accent';  // Foreground for contrast check
  bg: 'background' | 'container';      // Background for contrast check
  target: number;         // Target contrast ratio
  onColor?: string;       // Optional on-color for button text
}

​

ColorButtonProps

interface ColorButtonProps {
  color: string;
  label: string;
  property: string;
  onClick: (color: string, property: string, button: HTMLButtonElement) => void;
  isLocked: boolean;
  onLockToggle: (property: string) => void;
  ratio: number;
  target: number;
  isDarkTheme: boolean;
  isCompact: boolean;
  onColor?: string;
}

​

Theme Context Integration

• theme - Current theme object
• updateThemeProperty - Update a single theme property
• themeName - Current theme mode (‘light’ or ‘dark’)
• setTheme - Set entire theme at once
• undo / redo - History navigation
• canUndo / canRedo - History state
• pushHistory - Save current state to history
• savedThemes - Array of saved custom themes