Theme Manager

Slot: Primary
- Light Theme: #2196F3 (vivid blue)
- Dark Theme: #64B5F6 (lighter, desaturated blue)

Slot: Background
- Light Theme: #FFFFFF (white)
- Dark Theme: #121212 (dark gray)

Slot: Text
- Light Theme: #212121 (dark gray)
- Dark Theme: #FFFFFF (white)

Slot: Surface
- Light Theme: #F5F5F5 (light gray, darker than background)
- Dark Theme: #1E1E1E (lighter than background for elevation)

Slots:
- Primary (main brand color)
- Secondary (accent color)
- Background
- Text

Brand A Theme:
- Primary: #2196F3 (blue)
- Secondary: #FF5722 (orange)
- Background: #FFFFFF
- Text: #212121

Brand B Theme:
- Primary: #9C27B0 (purple)
- Secondary: #4CAF50 (green)
- Background: #FFFFFF
- Text: #212121

// Detect user's system theme
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme = prefersDark ? "dark" : "light";

// Load animation with detected theme
player.loadAnimation({
  path: "animation.lottie",
  theme: theme,
});

// Listen for theme changes
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
  const newTheme = e.matches ? "dark" : "light";
  player.setTheme(newTheme);
});

Theme State Machine
├── States
│   ├── idle          - No operation in progress
│   ├── creating      - Creating new theme
│   ├── editing       - Editing theme colors
│   ├── applying      - Switching active theme
│   ├── deleting      - Deleting theme
│   └── validating    - Validating theme completeness
├── Events
│   ├── CREATE_THEME       - Trigger theme creation
│   ├── EDIT_THEME         - Enter edit mode
│   ├── APPLY_THEME        - Switch active theme
│   ├── DELETE_THEME       - Remove theme
│   ├── UPDATE_SLOT_COLOR  - Change slot color in theme
│   └── VALIDATE           - Check theme completeness
└── Context
    ├── themes            - Array of all themes
    ├── activeThemeId     - Currently active theme
    ├── editingThemeId    - Theme being edited (if any)
    └── validationErrors  - Validation issues

import { createMachine, assign } from "xstate";

const themeManagerMachine = createMachine({
  id: "themeManager",
  initial: "idle",
  context: {
    themes: [],
    activeThemeId: null,
    editingThemeId: null,
    validationErrors: [],
  },
  states: {
    idle: {
      on: {
        CREATE_THEME: {
          target: "creating",
          actions: "prepareThemeCreation",
        },
        EDIT_THEME: {
          target: "editing",
          actions: "setEditingTheme",
        },
        APPLY_THEME: {
          target: "applying",
          actions: "prepareThemeApplication",
        },
        DELETE_THEME: {
          target: "deleting",
          actions: "prepareThemeDeletion",
        },
      },
    },
    creating: {
      entry: "createNewTheme",
      on: {
        SUCCESS: {
          target: "idle",
          actions: "addThemeToList",
        },
        ERROR: {
          target: "idle",
          actions: "handleCreationError",
        },
      },
    },
    editing: {
      on: {
        UPDATE_SLOT_COLOR: {
          actions: "updateSlotColorInTheme",
        },
        FINISH_EDITING: {
          target: "idle",
          actions: "finalizeEditing",
        },
      },
    },
    applying: {
      entry: "applyThemeToScene",
      on: {
        SUCCESS: {
          target: "idle",
          actions: ["setActiveTheme", "updateCanvas"],
        },
        ERROR: {
          target: "idle",
          actions: "handleApplicationError",
        },
      },
    },
    deleting: {
      entry: "deleteTheme",
      on: {
        SUCCESS: {
          target: "idle",
          actions: "removeThemeFromList",
        },
        ERROR: {
          target: "idle",
          actions: "handleDeletionError",
        },
      },
    },
    validating: {
      entry: "validateThemes",
      on: {
        SUCCESS: {
          target: "idle",
          actions: "clearValidationErrors",
        },
        ERROR: {
          target: "idle",
          actions: "setValidationErrors",
        },
      },
    },
  },
});

// Create theme
themeManager.send({
  type: "CREATE_THEME",
  data: {
    name: "Dark Mode",
    basedOn: "light", // Optional: duplicate existing theme
  },
});

// Edit theme color
themeManager.send({
  type: "UPDATE_SLOT_COLOR",
  data: {
    themeId: "dark",
    slotId: "primary-color",
    color: { r: 100, g: 181, b: 246, a: 1 },
  },
});

// Apply theme
themeManager.send({
  type: "APPLY_THEME",
  data: {
    themeId: "dark",
  },
});

const DEFAULT_THEME = {
  id: "DEFAULT_THEME",
  name: "Default",
  isSystem: true, // System-generated, can't be deleted
  isPrimary: false, // Not a user-created primary theme
  colors: new Map([
    ["primary-color", { r: 33, g: 150, b: 243, a: 1 }],
    ["bg-color", { r: 255, g: 255, b: 255, a: 1 }],
    // ... all slot default colors
  ]),
};

class ThemeManager {
  getActiveTheme(): Theme {
    // If no theme explicitly set, use DEFAULT_THEME
    if (!this.activeThemeId) {
      return this.themes.get("DEFAULT_THEME");
    }
    return this.themes.get(this.activeThemeId);
  }

  getSlotColor(slotId: string): Color {
    const activeTheme = this.getActiveTheme();

    // Try to get color from active theme
    if (activeTheme.hasColor(slotId)) {
      return activeTheme.getColor(slotId);
    }

    // Fallback to DEFAULT_THEME
    const defaultTheme = this.themes.get("DEFAULT_THEME");
    return defaultTheme.getColor(slotId);
  }

  createColorSlot(slotId: string, initialColor: Color): void {
    const slot = new ColorSlot(slotId, initialColor);

    // Automatically add slot to DEFAULT_THEME
    const defaultTheme = this.themes.get("DEFAULT_THEME");
    defaultTheme.setColor(slotId, initialColor);

    // Also add to all other themes (prompts user for colors)
    for (const theme of this.themes.values()) {
      if (theme.id !== "DEFAULT_THEME") {
        theme.setColor(slotId, initialColor); // Use default as starting point
      }
    }
  }
}

// DEFAULT_THEME (system)
{
  id: "DEFAULT_THEME",
  name: "Default",
  isSystem: true,
  canDelete: false,
  canRename: false
}

// User Theme
{
  id: "light",
  name: "Light Mode",
  isSystem: false,
  canDelete: true,
  canRename: true
}

{
  "version": "1.0",
  "project": {
    "name": "My Animation",
    "width": 1920,
    "height": 1080
  },
  "themes": {
    "DEFAULT_THEME": {
      "id": "DEFAULT_THEME",
      "name": "Default",
      "isSystem": true,
      "colors": {
        "primary-color": { "r": 33, "g": 150, "b": 243, "a": 1 },
        "bg-color": { "r": 255, "g": 255, "b": 255, "a": 1 }
      }
    },
    "light": {
      "id": "light",
      "name": "Light Mode",
      "isSystem": false,
      "colors": {
        "primary-color": { "r": 33, "g": 150, "b": 243, "a": 1 },
        "bg-color": { "r": 255, "g": 255, "b": 255, "a": 1 }
      }
    },
    "dark": {
      "id": "dark",
      "name": "Dark Mode",
      "isSystem": false,
      "colors": {
        "primary-color": { "r": 100, "g": 181, "b": 246, "a": 1 },
        "bg-color": { "r": 18, "g": 18, "b": 18, "a": 1 }
      }
    }
  },
  "activeThemeId": "light",
  "colorSlots": [
    {
      "assetId": "primary-color",
      "slotType": 2,
      "type": "SLOT"
    },
    {
      "assetId": "bg-color",
      "slotType": 2,
      "type": "SLOT"
    }
  ],
  "layers": [],
  "assets": []
}

class ThemeSerializer {
  serialize(themes: Map<string, Theme>): any {
    const serialized = {};

    for (const [id, theme] of themes) {
      serialized[id] = {
        id: theme.id,
        name: theme.name,
        isSystem: theme.isSystem,
        colors: {},
      };

      // Serialize colors map
      for (const [slotId, color] of theme.colors) {
        serialized[id].colors[slotId] = {
          r: color.r,
          g: color.g,
          b: color.b,
          a: color.a,
        };
      }
    }

    return serialized;
  }

  deserialize(data: any): Map<string, Theme> {
    const themes = new Map();

    for (const [id, themeData] of Object.entries(data)) {
      const theme = new Theme(themeData.id, themeData.name, themeData.isSystem);

      // Deserialize colors
      for (const [slotId, colorData] of Object.entries(themeData.colors)) {
        theme.setColor(slotId, colorData);
      }

      themes.set(id, theme);
    }

    return themes;
  }
}

async function saveProject() {
  // 1. Gather project data
  const projectData = {
    version: "1.0",
    project: getProjectMetadata(),
    themes: themeSerializer.serialize(themeManager.getAllThemes()),
    activeThemeId: themeManager.getActiveThemeId(),
    colorSlots: slotManager.serializeSlots(),
    layers: sceneGraph.serializeLayers(),
    assets: assetManager.serializeAssets(),
  };

  // 2. Convert to JSON
  const json = JSON.stringify(projectData, null, 2);

  // 3. Save to file
  await fs.writeFile(projectPath, json, "utf-8");

  // 4. Mark as saved
  projectState.markSaved();
}

async function loadProject(filePath: string) {
  // 1. Read file
  const json = await fs.readFile(filePath, "utf-8");
  const data = JSON.parse(json);

  // 2. Load themes first
  const themes = themeSerializer.deserialize(data.themes);
  themeManager.setThemes(themes);

  // 3. Set active theme
  themeManager.setActiveTheme(data.activeThemeId);

  // 4. Load color slots (they reference themes)
  slotManager.deserializeSlots(data.colorSlots);

  // 5. Load layers and assets
  sceneGraph.deserializeLayers(data.layers);
  assetManager.deserializeAssets(data.assets);

  // 6. Render with active theme
  canvas.render();
}

class ThemeManager {
  private activeThemeId: string = "DEFAULT_THEME";
  private themes: Map<string, Theme> = new Map();
  private listeners: Set<ThemeChangeListener> = new Set();

  getActiveTheme(): Theme {
    return this.themes.get(this.activeThemeId);
  }

  setActiveTheme(themeId: string): void {
    // 1. Validate theme exists
    if (!this.themes.has(themeId)) {
      throw new Error(`Theme "${themeId}" not found`);
    }

    // 2. Store previous theme (for undo)
    const previousThemeId = this.activeThemeId;

    // 3. Update active theme
    this.activeThemeId = themeId;

    // 4. Update all slot values
    this.updateSlotsWithTheme(themeId);

    // 5. Trigger canvas re-render
    canvas.render();

    // 6. Notify listeners
    this.notifyThemeChange(previousThemeId, themeId);

    // 7. Add to undo stack
    undoManager.add({
      type: "THEME_CHANGE",
      previousTheme: previousThemeId,
      newTheme: themeId,
    });
  }

  private updateSlotsWithTheme(themeId: string): void {
    const theme = this.themes.get(themeId);

    // Update each slot with theme's color
    for (const slot of slotManager.getAllSlots()) {
      const color = theme.getColor(slot.id);
      slot.updateValue(color);
    }
  }

  private notifyThemeChange(oldThemeId: string, newThemeId: string): void {
    const event = {
      type: "theme_changed",
      oldTheme: oldThemeId,
      newTheme: newThemeId,
      timestamp: Date.now(),
    };

    for (const listener of this.listeners) {
      listener.onThemeChange(event);
    }
  }
}

User Selects Theme "dark"
  ↓
ThemeManager.setActiveTheme("dark")
  ↓
Load "dark" theme colors
  ↓
Update all color slots with dark theme values
  │
  ├─ Slot "primary-color": #2196F3 → #64B5F6
  ├─ Slot "bg-color": #FFFFFF → #121212
  └─ Slot "text-color": #212121 → #FFFFFF
  ↓
Slots notify referenced properties
  │
  ├─ Button fill updates to #64B5F6
  ├─ Background fill updates to #121212
  └─ Text fill updates to #FFFFFF
  ↓
Canvas re-renders with new colors
  ↓
UI updates active theme indicator
  ↓
Undo operation added to history

class ThemeManager {
  private renderScheduled = false;

  setActiveTheme(themeId: string): void {
    // ... theme change logic ...

    // Batch render updates
    this.scheduleRender();
  }

  updateSlotColor(themeId: string, slotId: string, color: Color): void {
    const theme = this.themes.get(themeId);
    theme.setColor(slotId, color);

    // Only update if this is the active theme
    if (themeId === this.activeThemeId) {
      const slot = slotManager.getSlot(slotId);
      slot.updateValue(color);

      // Batch render
      this.scheduleRender();
    }
  }

  private scheduleRender(): void {
    if (this.renderScheduled) return;

    this.renderScheduled = true;

    // Use requestAnimationFrame to batch multiple updates
    requestAnimationFrame(() => {
      canvas.render();
      this.renderScheduled = false;
    });
  }
}

class SlotManager {
  createSlot(slotId: string, initialColor: Color): ColorSlot {
    // 1. Create slot
    const slot = new ColorSlot(slotId, initialColor);
    this.slots.set(slotId, slot);

    // 2. Add to DEFAULT_THEME
    const defaultTheme = themeManager.getTheme("DEFAULT_THEME");
    defaultTheme.setColor(slotId, initialColor);

    // 3. Distribute to all user themes
    const userThemes = themeManager.getUserThemes();
    for (const theme of userThemes) {
      // Use initial color as starting point
      theme.setColor(slotId, initialColor);

      // Mark as needing user review
      theme.markSlotAsNew(slotId);
    }

    // 4. Notify UI to prompt user for theme colors
    this.notifySlotCreated(slotId, userThemes.length);

    return slot;
  }

  private notifySlotCreated(slotId: string, themeCount: number): void {
    // Show notification to user
    notifications.show({
      type: "info",
      message: `Color slot "${slotId}" created. Define colors for ${themeCount} themes.`,
      action: {
        label: "Open Theme Manager",
        callback: () => panels.open("theme-manager", { focusSlot: slotId }),
      },
    });
  }
}

// Before: Project with 2 themes
themes = {
  light: {
    colors: {
      primary: { r: 33, g: 150, b: 243, a: 1 },
      bg: { r: 255, g: 255, b: 255, a: 1 },
    },
  },
  dark: {
    colors: {
      primary: { r: 100, g: 181, b: 246, a: 1 },
      bg: { r: 18, g: 18, b: 18, a: 1 },
    },
  },
};

// User creates new slot "accent" with color #FF5722
slotManager.createSlot("accent", { r: 255, g: 87, b: 34, a: 1 });

// After: Slot added to all themes
themes = {
  light: {
    colors: {
      primary: { r: 33, g: 150, b: 243, a: 1 },
      bg: { r: 255, g: 255, b: 255, a: 1 },
      accent: { r: 255, g: 87, b: 34, a: 1 }, // New - needs review
    },
  },
  dark: {
    colors: {
      primary: { r: 100, g: 181, b: 246, a: 1 },
      bg: { r: 18, g: 18, b: 18, a: 1 },
      accent: { r: 255, g: 87, b: 34, a: 1 }, // New - needs adjustment for dark
    },
  },
};

// UI prompts user: "Review new color slot 'accent' in Dark theme"

class ThemeManager {
  validateThemeCompleteness(themeId: string): ValidationResult {
    const theme = this.themes.get(themeId);
    const allSlots = slotManager.getAllSlots();
    const errors: string[] = [];
    const warnings: string[] = [];

    for (const slot of allSlots) {
      if (!theme.hasColor(slot.id)) {
        errors.push(`Theme "${theme.name}" missing color for slot "${slot.id}"`);
      }
    }

    // Check for slots with default colors (may need customization)
    for (const [slotId, color] of theme.colors) {
      const defaultColor = this.getTheme("DEFAULT_THEME").getColor(slotId);
      if (colorsEqual(color, defaultColor)) {
        warnings.push(`Slot "${slotId}" in theme "${theme.name}" uses default color (consider customizing)`);
      }
    }

    return {
      valid: errors.length === 0,
      errors,
      warnings,
    };
  }
}

enum ThemeOperation {
  CREATE_THEME = "CREATE_THEME",
  DELETE_THEME = "DELETE_THEME",
  RENAME_THEME = "RENAME_THEME",
  CHANGE_ACTIVE_THEME = "CHANGE_ACTIVE_THEME",
  UPDATE_SLOT_COLOR = "UPDATE_SLOT_COLOR",
  DUPLICATE_THEME = "DUPLICATE_THEME",
}

interface ThemeUndoableAction {
  type: ThemeOperation;
  execute(): void;
  undo(): void;
  redo(): void;
}

class UpdateSlotColorAction implements ThemeUndoableAction {
  constructor(
    private themeId: string,
    private slotId: string,
    private oldColor: Color,
    private newColor: Color
  ) {}

  execute(): void {
    const theme = themeManager.getTheme(this.themeId);
    theme.setColor(this.slotId, this.newColor);

    // If this is active theme, update canvas
    if (themeManager.getActiveThemeId() === this.themeId) {
      const slot = slotManager.getSlot(this.slotId);
      slot.updateValue(this.newColor);
      canvas.render();
    }
  }

  undo(): void {
    const theme = themeManager.getTheme(this.themeId);
    theme.setColor(this.slotId, this.oldColor);

    if (themeManager.getActiveThemeId() === this.themeId) {
      const slot = slotManager.getSlot(this.slotId);
      slot.updateValue(this.oldColor);
      canvas.render();
    }
  }

  redo(): void {
    this.execute();
  }
}

class ChangeActiveThemeAction implements ThemeUndoableAction {
  constructor(
    private previousThemeId: string,
    private newThemeId: string
  ) {}

  execute(): void {
    themeManager.setActiveTheme(this.newThemeId);
  }

  undo(): void {
    themeManager.setActiveTheme(this.previousThemeId);
  }

  redo(): void {
    this.execute();
  }
}

class CreateThemeAction implements ThemeUndoableAction {
  private createdTheme: Theme;

  constructor(
    private themeName: string,
    private baseThemeId?: string
  ) {}

  execute(): void {
    // Create theme
    this.createdTheme = themeManager.createTheme(this.themeName, this.baseThemeId);
  }

  undo(): void {
    // Delete the created theme
    themeManager.deleteTheme(this.createdTheme.id);
  }

  redo(): void {
    // Re-add the theme
    themeManager.addTheme(this.createdTheme);
  }
}

class ThemeManager {
  updateSlotColor(themeId: string, slotId: string, newColor: Color): void {
    // Get current color for undo
    const theme = this.themes.get(themeId);
    const oldColor = theme.getColor(slotId);

    // Create undoable action
    const action = new UpdateSlotColorAction(themeId, slotId, oldColor, newColor);

    // Execute and add to undo stack
    action.execute();
    undoManager.add(action);
  }

  setActiveTheme(themeId: string): void {
    const previousThemeId = this.activeThemeId;

    // Create undoable action
    const action = new ChangeActiveThemeAction(previousThemeId, themeId);

    // Execute and add to undo stack
    action.execute();
    undoManager.add(action);
  }
}

interface ThemeEvent {
  type: ThemeEventType;
  timestamp: number;
  data: any;
}

enum ThemeEventType {
  THEME_CREATED = "theme_created",
  THEME_DELETED = "theme_deleted",
  THEME_RENAMED = "theme_renamed",
  THEME_ACTIVATED = "theme_activated",
  SLOT_COLOR_CHANGED = "slot_color_changed",
  THEME_VALIDATED = "theme_validated",
}

class ThemeManager extends EventEmitter {
  createTheme(name: string, baseThemeId?: string): Theme {
    // Create theme
    const theme = new Theme(name, generateId());

    // Copy colors from base theme if specified
    if (baseThemeId) {
      const baseTheme = this.themes.get(baseThemeId);
      for (const [slotId, color] of baseTheme.colors) {
        theme.setColor(slotId, color);
      }
    }

    // Add to themes map
    this.themes.set(theme.id, theme);

    // Emit event
    this.emit("theme_created", {
      type: ThemeEventType.THEME_CREATED,
      timestamp: Date.now(),
      data: {
        themeId: theme.id,
        themeName: theme.name,
        basedOn: baseThemeId,
      },
    });

    return theme;
  }

  setActiveTheme(themeId: string): void {
    const previousThemeId = this.activeThemeId;
    this.activeThemeId = themeId;

    // ... update slots and render ...

    // Emit event
    this.emit("theme_activated", {
      type: ThemeEventType.THEME_ACTIVATED,
      timestamp: Date.now(),
      data: {
        previousTheme: previousThemeId,
        activeTheme: themeId,
      },
    });
  }

  updateSlotColor(themeId: string, slotId: string, color: Color): void {
    const theme = this.themes.get(themeId);
    const oldColor = theme.getColor(slotId);
    theme.setColor(slotId, color);

    // Emit event
    this.emit("slot_color_changed", {
      type: ThemeEventType.SLOT_COLOR_CHANGED,
      timestamp: Date.now(),
      data: {
        themeId,
        slotId,
        oldColor,
        newColor: color,
      },
    });

    // Update canvas if active theme
    if (themeId === this.activeThemeId) {
      const slot = slotManager.getSlot(slotId);
      slot.updateValue(color);
      canvas.render();
    }
  }
}

// UI updates
themeManager.on("theme_created", (event) => {
  themeListUI.addTheme(event.data.themeId);
  notifications.show(`Theme "${event.data.themeName}" created`);
});

themeManager.on("theme_activated", (event) => {
  themeListUI.setActive(event.data.activeTheme);
  canvas.render();
});

// Analytics tracking
themeManager.on("slot_color_changed", (event) => {
  analytics.track("theme_color_updated", {
    theme: event.data.themeId,
    slot: event.data.slotId,
  });
});

// Auto-save on theme changes
themeManager.on("theme_created", () => projectManager.markDirty());
themeManager.on("theme_deleted", () => projectManager.markDirty());
themeManager.on("slot_color_changed", () => projectManager.markDirty());

class ThemeImporter {
  async importAnimation(lottieJSON: any): Promise<void> {
    // 1. Parse imported animation's themes
    const importedThemes = this.parseThemes(lottieJSON);

    // 2. Detect conflicts
    const conflicts = this.detectConflicts(importedThemes);

    // 3. Resolve conflicts
    if (conflicts.length > 0) {
      const resolution = await this.promptUserForResolution(conflicts);
      this.applyResolution(importedThemes, resolution);
    }

    // 4. Merge themes
    for (const theme of importedThemes) {
      themeManager.addTheme(theme);
    }

    // 5. Merge slots
    const importedSlots = this.parseSlots(lottieJSON);
    for (const slot of importedSlots) {
      slotManager.mergeSlot(slot);
    }
  }

  private detectConflicts(importedThemes: Theme[]): Conflict[] {
    const conflicts: Conflict[] = [];
    const existingThemes = themeManager.getAllThemes();

    for (const importedTheme of importedThemes) {
      const existing = existingThemes.get(importedTheme.id);

      if (existing) {
        conflicts.push({
          type: "theme_id_conflict",
          existingTheme: existing,
          importedTheme: importedTheme,
        });
      }
    }

    return conflicts;
  }

  private async promptUserForResolution(conflicts: Conflict[]): Promise<ResolutionStrategy> {
    // Show dialog to user
    return await showConflictDialog({
      conflicts,
      options: [
        { value: "rename", label: "Rename imported themes" },
        { value: "merge", label: "Merge with existing themes" },
        { value: "skip", label: "Skip conflicting themes" },
        { value: "replace", label: "Replace existing themes" },
      ],
    });
  }
}

// Typical performance metrics
const performanceMetrics = {
  createTheme: "< 1ms", // Nearly instant
  deleteTheme: "< 1ms", // Nearly instant
  renameTheme: "< 1ms", // Nearly instant
  updateSlotColor: "< 5ms", // Color update + slot propagation
  switchActiveTheme: "10-50ms", // Depends on slot count and complexity
  validateTheme: "< 5ms", // Check all slots defined
  exportThemes: "50-200ms", // Depends on theme count and file size
  importThemes: "100-500ms", // Depends on file size and conflicts
};

// 1. Batched Updates
class ThemeManager {
  private updateBatch: Map<string, Color> = new Map();
  private batchScheduled = false;

  updateSlotColor(themeId: string, slotId: string, color: Color): void {
    // Add to batch
    this.updateBatch.set(`${themeId}:${slotId}`, color);

    // Schedule batch processing
    if (!this.batchScheduled) {
      this.batchScheduled = true;
      requestAnimationFrame(() => this.processBatch());
    }
  }

  private processBatch(): void {
    // Process all updates at once
    for (const [key, color] of this.updateBatch) {
      const [themeId, slotId] = key.split(":");
      this.applyColorUpdate(themeId, slotId, color);
    }

    // Clear batch
    this.updateBatch.clear();
    this.batchScheduled = false;

    // Single render
    canvas.render();
  }
}

// 2. Lazy Validation
class ThemeManager {
  private validationCache: Map<string, ValidationResult> = new Map();

  validateTheme(themeId: string): ValidationResult {
    // Check cache
    if (this.validationCache.has(themeId)) {
      return this.validationCache.get(themeId);
    }

    // Perform validation
    const result = this.performValidation(themeId);

    // Cache result
    this.validationCache.set(themeId, result);

    return result;
  }

  invalidateValidationCache(themeId?: string): void {
    if (themeId) {
      this.validationCache.delete(themeId);
    } else {
      this.validationCache.clear();
    }
  }
}

Light Theme:
- Purpose: Daytime use, standard mode
- Background: #FFFFFF (pure white)
- Primary: #2196F3 (brand blue)
- Text: #212121 (near-black, WCAG AAA)

Dark Theme:
- Purpose: Low-light use, dark mode
- Background: #121212 (Material dark gray, not pure black)
- Primary: #64B5F6 (lighter blue, adjusted for dark bg)
- Text: #FFFFFF (white, WCAG AAA on background)