🐛 Meta theme-color not updating when user selects different themes

[pprunty]

Bug Description

The meta theme-color tag is not updating correctly when users select different themes from the theme selector. This causes mobile browser status bars to display incorrect colors that don't match the selected theme.

Current Behavior

• ❌ Meta theme-color remains static regardless of user-selected theme
• ❌ Mobile browser status bar shows default colors instead of theme-specific colors
• ❌ Theme switching only updates CSS variables but not meta tag

Expected Behavior

• ✅ Meta theme-color should update dynamically when theme changes
• ✅ Mobile browser status bar should match the selected theme's background color
• ✅ Both light and dark mode variations should be supported for each theme

Root Cause Analysis

Current Implementation Issues

1. Multiple Theme Systems: There are conflicting implementations:

   • META_THEME_COLORS (static light/dark only) in lib/config.ts:69-72
   • THEME_META_COLORS (theme-specific colors) in lib/config.ts:74-81

2. Theme Provider Conflict: The components/theme-provider.tsx only handles light/dark mode switching but doesn't consider the active theme selected by user.

3. Active Theme Handler: The components/active-theme.tsx has proper logic but may not be executing correctly or being overridden by other theme handlers.

Code Locations

// lib/config.ts - Static meta colors (problematic)
export const META_THEME_COLORS = {
  light: "#ffffff",
  dark: "#13120a",
}

// lib/config.ts - Theme-specific colors (correct approach)
export const THEME_META_COLORS = {
  dublin: { light: "#f5f6eb", dark: "#02060a" },
  clare: { light: "#fdf6e3", dark: "#002b36" },
  neobrutalism: { light: "#fefefe", dark: "#000000" },
  kerry: { light: "#f9f9f9", dark: "#020700" },
  cork: { light: "#dde8e8", dark: "#02060a" },
  galway: { light: "#fbf7f5", dark: "#03030a" }
}

Technical Details

Problem Files:

1. app/layout.tsx:30 - Uses static META_THEME_COLORS.dark
2. app/layout.tsx:47 - Initial meta tag uses META_THEME_COLORS.light
3. components/theme-provider.tsx:21-32 - Only handles light/dark, ignores theme selection
4. components/active-theme.tsx:47-65 - Correct implementation but may be overridden

Impact:

• Mobile UX: Status bar colors don't match theme aesthetics
• Brand Consistency: Theme identity is broken on mobile devices
• User Experience: Jarring visual disconnect between theme and browser UI

Reproduction Steps

1. Go to deltacomponents.dev/themes
2. Select any theme (e.g., Kerry, Galway, Dublin)
3. Open browser developer tools
4. Inspect the <meta name="theme-color" content="..."> tag
5. Notice the content value doesn't match the selected theme
6. Switch between light/dark mode and themes
7. Observe that meta theme-color doesn't update accordingly

Expected Fix

The meta theme-color should dynamically update based on:

1. User-selected theme (dublin, kerry, galway, etc.)
2. Current light/dark mode preference
3. Using the correct color from THEME_META_COLORS[theme][mode]

Environment

• Browser: All browsers (affects mobile safari status bar most visibly)
• Device: Mobile devices show this most prominently
• Theme System: All custom themes (dublin, clare, neobrutalism, kerry, cork, galway)

Suggested Solution

1. Remove dependency on static META_THEME_COLORS
2. Ensure components/active-theme.tsx theme color update logic executes
3. Fix execution order so theme-specific colors aren't overridden
4. Add proper error handling for missing theme colors