Filter color palettes by dark/light mode

- Add themeMode?: 'dark'|'light' to ThemeColor (unset = any mode)
- Tag all DaisyUI themes: 11 dark (synthwave, aqua, luxury, night, etc.)
  and 6 light (light, cupcake, valentine, cyberpunk, retro, winter)
- Tag HeroUI Marketing themes: purple/blue/teal/modern=light, dark=dark
- Aceternity accent palettes stay untagged (work with either mode)
- Filter availableColorThemes in SurfaceSection by designConfig.mode
- Auto-reset active palette when mode switches makes previously
  selected palette incompatible

Made-with: Cursor

app/[workspace]/project/[projectId]/design/page.tsx

@@ -535,11 +535,20 @@ function SurfaceSection({
   const activeTheme = surface.themes.find(t => t.id === previewId);
   const ScaffoldComponent = previewId ? SCAFFOLD_REGISTRY[surface.id]?.[previewId] : null;
 
-  const availableColorThemes: ThemeColor[] = previewId
+  const allColorThemes: ThemeColor[] = previewId
     ? (THEME_REGISTRY[surface.id]?.[previewId] ?? [])
     : [];
   const [selectedColorTheme, setSelectedColorTheme] = useState<ThemeColor | null>(null);
-  const activeColorTheme = selectedColorTheme ?? availableColorThemes[0] ?? null;
+
+  // Filter palettes to match the current mode; untagged themes (themeMode undefined) show in any mode
+  const availableColorThemes = allColorThemes.filter(
+    ct => !ct.themeMode || ct.themeMode === designConfig.mode
+  );
+
+  // If the selected palette is no longer valid for the new mode, clear it so the
+  // first compatible one is auto-selected below
+  const selectedIsCompatible = !selectedColorTheme || availableColorThemes.some(ct => ct.id === selectedColorTheme.id);
+  const activeColorTheme = (selectedIsCompatible ? selectedColorTheme : null) ?? availableColorThemes[0] ?? null;
 
   // Design config — per-library style choices (mode, background, nav, header, sections, font)
   const defaultForLibrary = previewId ? LIBRARY_STYLE_OPTIONS[previewId]?.defaultConfig : undefined;