mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Filter color palettes by dark/light mode

Browse Source 
- 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
This commit is contained in:
Mark Henderson
2026-03-06 11:03:22 -08:00
parent 5e4cce55de
commit 7eaf1ca4f1
2 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/[workspace]/project/[projectId]/design/page.tsx
View File

@@ -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;

50
components/design-scaffolds/types.ts
View File

@@ -17,6 +17,8 @@ export interface ThemeColor {
textColor?: string;
borderColor?: string;
mutedText?: string;
/** If set, only show this palette when the user's mode matches. Unset = show for any mode. */
themeMode?: "dark" | "light";
}
// ---------------------------------------------------------------------------
@@ -93,24 +95,26 @@ export const TREMOR_THEMES: ThemeColor[] = [
];
export const DAISY_THEMES: ThemeColor[] = [
{ id: "dark", label: "Dark", primary: "#793ef9", primaryFg: "#fff", activeBg: "rgba(121,62,249,0.2)", activeFg: "#a78bfa", ring: "#4c1d95", bg: "#1d232a", cardBg: "#191e24", textColor: "#a6adba", borderColor: "#2a323c", mutedText: "#6b7280" },
{ id: "light", label: "Light", primary: "#570df8", primaryFg: "#fff", activeBg: "#f3f0ff", activeFg: "#4c1d95", ring: "#ddd6fe", bg: "#fff", cardBg: "#fff", textColor: "#1f2937", borderColor: "#e5e7eb", mutedText: "#6b7280" },
{ id: "cupcake", label: "Cupcake", primary: "#65c3c8", primaryFg: "#291334", activeBg: "#d9f5f6", activeFg: "#0e6b70", ring: "#a7eaec", bg: "#faf7f5", cardBg: "#fff", textColor: "#291334", borderColor: "#e9e3df", mutedText: "#9ca3af" },
{ id: "synthwave", label: "Synthwave", primary: "#e779c1", primaryFg: "#2d1b69", activeBg: "rgba(231,121,193,0.2)", activeFg: "#f0abdc", ring: "#701a75", bg: "#1a103c", cardBg: "#221551", textColor: "#e2e8f0", borderColor: "#4c3585", mutedText: "#a78bfa" },
{ id: "cyberpunk", label: "Cyberpunk", primary: "#ff7598", primaryFg: "#1a103d", activeBg: "rgba(255,117,152,0.2)", activeFg: "#ff7598", ring: "rgba(255,117,152,0.5)", bg: "#ffff00", cardBg: "#ffef00", textColor: "#1a103d", borderColor: "#ff7598", mutedText: "rgba(26,16,61,0.55)" },
{ id: "halloween", label: "Halloween", primary: "#f28c18", primaryFg: "#fff", activeBg: "rgba(242,140,24,0.15)", activeFg: "#f28c18", ring: "rgba(242,140,24,0.4)", bg: "#212121", cardBg: "#2a2a2a", textColor: "#f4f4f4", borderColor: "#383838", mutedText: "#888" },
{ id: "valentine", label: "Valentine", primary: "#e96d7b", primaryFg: "#fff", activeBg: "rgba(233,109,123,0.1)", activeFg: "#e96d7b", ring: "rgba(233,109,123,0.3)", bg: "#fae6eb", cardBg: "#fff5f7", textColor: "#632935", borderColor: "#f4c2cb", mutedText: "#9a5468" },
{ id: "aqua", label: "Aqua", primary: "#09ecf3", primaryFg: "#1a1a1a", activeBg: "rgba(9,236,243,0.15)", activeFg: "#09ecf3", ring: "rgba(9,236,243,0.4)", bg: "#0f172a", cardBg: "#1e293b", textColor: "#e2e8f0", borderColor: "#334155", mutedText: "#94a3b8" },
{ id: "luxury", label: "Luxury", primary: "#dca54c", primaryFg: "#09090b", activeBg: "rgba(220,165,76,0.15)", activeFg: "#dca54c", ring: "rgba(220,165,76,0.4)", bg: "#09090b", cardBg: "#171717", textColor: "#f5f5f4", borderColor: "#262626", mutedText: "#737373" },
{ id: "night", label: "Night", primary: "#38bdf8", primaryFg: "#0c1a2a", activeBg: "rgba(56,189,248,0.15)", activeFg: "#38bdf8", ring: "rgba(56,189,248,0.4)", bg: "#0f1923", cardBg: "#1a2535", textColor: "#cbd5e1", borderColor: "#1e3a5f", mutedText: "#64748b" },
{ id: "coffee", label: "Coffee", primary: "#db924b", primaryFg: "#fff", activeBg: "rgba(219,146,75,0.15)", activeFg: "#db924b", ring: "rgba(219,146,75,0.4)", bg: "#20100e", cardBg: "#2c1810", textColor: "#e8d5c4", borderColor: "#3d2319", mutedText: "#8b6355" },
{ id: "dracula", label: "Dracula", primary: "#ff79c6", primaryFg: "#282a36", activeBg: "rgba(255,121,198,0.15)", activeFg: "#ff79c6", ring: "#bd93f9", bg: "#282a36", cardBg: "#343746", textColor: "#f8f8f2", borderColor: "#44475a", mutedText: "#6272a4" },
{ id: "forest", label: "Forest", primary: "#1eb854", primaryFg: "#fff", activeBg: "rgba(30,184,84,0.15)", activeFg: "#1eb854", ring: "#15803d", bg: "#171212", cardBg: "#1d1d1d", textColor: "#d1d5db", borderColor: "#292929", mutedText: "#4b5563" },
{ id: "retro", label: "Retro", primary: "#ef9995", primaryFg: "#282425", activeBg: "#fde8e7", activeFg: "#7f1d1d", ring: "#fca5a5", bg: "#e4d8b4", cardBg: "#f7f0d8", textColor: "#282425", borderColor: "#d4b483", mutedText: "#6b5745" },
{ id: "nord", label: "Nord", primary: "#5e81ac", primaryFg: "#fff", activeBg: "rgba(94,129,172,0.15)", activeFg: "#88c0d0", ring: "rgba(94,129,172,0.4)", bg: "#2e3440", cardBg: "#3b4252", textColor: "#eceff4", borderColor: "#434c5e", mutedText: "#9198a1" },
{ id: "dim", label: "Dim", primary: "#9fb8d8", primaryFg: "#1c2638", activeBg: "rgba(159,184,216,0.15)", activeFg: "#9fb8d8", ring: "rgba(159,184,216,0.4)", bg: "#2a303c", cardBg: "#242933", textColor: "#c6cdd8", borderColor: "#3d4451", mutedText: "#717d8a" },
{ id: "winter", label: "Winter", primary: "#047aed", primaryFg: "#fff", activeBg: "#e0f0ff", activeFg: "#0369a1", ring: "#bae6fd", bg: "#fff", cardBg: "#f0f9ff", textColor: "#1e3a5f", borderColor: "#bae6fd", mutedText: "#64748b" },
{ id: "sunset", label: "Sunset", primary: "#ff865b", primaryFg: "#fff", activeBg: "rgba(255,134,91,0.15)", activeFg: "#ff865b", ring: "rgba(255,134,91,0.4)", bg: "#1a0a00", cardBg: "#270f00", textColor: "#f4c09a", borderColor: "#3d1a00", mutedText: "#8b5a3a" },
// — dark backgrounds —
{ id: "dark", label: "Dark", themeMode: "dark", primary: "#793ef9", primaryFg: "#fff", activeBg: "rgba(121,62,249,0.2)", activeFg: "#a78bfa", ring: "#4c1d95", bg: "#1d232a", cardBg: "#191e24", textColor: "#a6adba", borderColor: "#2a323c", mutedText: "#6b7280" },
{ id: "synthwave", label: "Synthwave", themeMode: "dark", primary: "#e779c1", primaryFg: "#2d1b69", activeBg: "rgba(231,121,193,0.2)", activeFg: "#f0abdc", ring: "#701a75", bg: "#1a103c", cardBg: "#221551", textColor: "#e2e8f0", borderColor: "#4c3585", mutedText: "#a78bfa" },
{ id: "halloween", label: "Halloween", themeMode: "dark", primary: "#f28c18", primaryFg: "#fff", activeBg: "rgba(242,140,24,0.15)", activeFg: "#f28c18", ring: "rgba(242,140,24,0.4)", bg: "#212121", cardBg: "#2a2a2a", textColor: "#f4f4f4", borderColor: "#383838", mutedText: "#888" },
{ id: "aqua", label: "Aqua", themeMode: "dark", primary: "#09ecf3", primaryFg: "#1a1a1a", activeBg: "rgba(9,236,243,0.15)", activeFg: "#09ecf3", ring: "rgba(9,236,243,0.4)", bg: "#0f172a", cardBg: "#1e293b", textColor: "#e2e8f0", borderColor: "#334155", mutedText: "#94a3b8" },
{ id: "luxury", label: "Luxury", themeMode: "dark", primary: "#dca54c", primaryFg: "#09090b", activeBg: "rgba(220,165,76,0.15)", activeFg: "#dca54c", ring: "rgba(220,165,76,0.4)", bg: "#09090b", cardBg: "#171717", textColor: "#f5f5f4", borderColor: "#262626", mutedText: "#737373" },
{ id: "night", label: "Night", themeMode: "dark", primary: "#38bdf8", primaryFg: "#0c1a2a", activeBg: "rgba(56,189,248,0.15)", activeFg: "#38bdf8", ring: "rgba(56,189,248,0.4)", bg: "#0f1923", cardBg: "#1a2535", textColor: "#cbd5e1", borderColor: "#1e3a5f", mutedText: "#64748b" },
{ id: "coffee", label: "Coffee", themeMode: "dark", primary: "#db924b", primaryFg: "#fff", activeBg: "rgba(219,146,75,0.15)", activeFg: "#db924b", ring: "rgba(219,146,75,0.4)", bg: "#20100e", cardBg: "#2c1810", textColor: "#e8d5c4", borderColor: "#3d2319", mutedText: "#8b6355" },
{ id: "dracula", label: "Dracula", themeMode: "dark", primary: "#ff79c6", primaryFg: "#282a36", activeBg: "rgba(255,121,198,0.15)", activeFg: "#ff79c6", ring: "#bd93f9", bg: "#282a36", cardBg: "#343746", textColor: "#f8f8f2", borderColor: "#44475a", mutedText: "#6272a4" },
{ id: "forest", label: "Forest", themeMode: "dark", primary: "#1eb854", primaryFg: "#fff", activeBg: "rgba(30,184,84,0.15)", activeFg: "#1eb854", ring: "#15803d", bg: "#171212", cardBg: "#1d1d1d", textColor: "#d1d5db", borderColor: "#292929", mutedText: "#4b5563" },
{ id: "nord", label: "Nord", themeMode: "dark", primary: "#5e81ac", primaryFg: "#fff", activeBg: "rgba(94,129,172,0.15)", activeFg: "#88c0d0", ring: "rgba(94,129,172,0.4)", bg: "#2e3440", cardBg: "#3b4252", textColor: "#eceff4", borderColor: "#434c5e", mutedText: "#9198a1" },
{ id: "dim", label: "Dim", themeMode: "dark", primary: "#9fb8d8", primaryFg: "#1c2638", activeBg: "rgba(159,184,216,0.15)", activeFg: "#9fb8d8", ring: "rgba(159,184,216,0.4)", bg: "#2a303c", cardBg: "#242933", textColor: "#c6cdd8", borderColor: "#3d4451", mutedText: "#717d8a" },
{ id: "sunset", label: "Sunset", themeMode: "dark", primary: "#ff865b", primaryFg: "#fff", activeBg: "rgba(255,134,91,0.15)", activeFg: "#ff865b", ring: "rgba(255,134,91,0.4)", bg: "#1a0a00", cardBg: "#270f00", textColor: "#f4c09a", borderColor: "#3d1a00", mutedText: "#8b5a3a" },
// — light backgrounds —
{ id: "light", label: "Light", themeMode: "light", primary: "#570df8", primaryFg: "#fff", activeBg: "#f3f0ff", activeFg: "#4c1d95", ring: "#ddd6fe", bg: "#fff", cardBg: "#fff", textColor: "#1f2937", borderColor: "#e5e7eb", mutedText: "#6b7280" },
{ id: "cupcake", label: "Cupcake", themeMode: "light", primary: "#65c3c8", primaryFg: "#291334", activeBg: "#d9f5f6", activeFg: "#0e6b70", ring: "#a7eaec", bg: "#faf7f5", cardBg: "#fff", textColor: "#291334", borderColor: "#e9e3df", mutedText: "#9ca3af" },
{ id: "valentine", label: "Valentine", themeMode: "light", primary: "#e96d7b", primaryFg: "#fff", activeBg: "rgba(233,109,123,0.1)", activeFg: "#e96d7b", ring: "rgba(233,109,123,0.3)", bg: "#fae6eb", cardBg: "#fff5f7", textColor: "#632935", borderColor: "#f4c2cb", mutedText: "#9a5468" },
{ id: "cyberpunk", label: "Cyberpunk", themeMode: "light", primary: "#ff7598", primaryFg: "#1a103d", activeBg: "rgba(255,117,152,0.2)", activeFg: "#ff7598", ring: "rgba(255,117,152,0.5)", bg: "#ffff00", cardBg: "#ffef00", textColor: "#1a103d", borderColor: "#ff7598", mutedText: "rgba(26,16,61,0.55)" },
{ id: "retro", label: "Retro", themeMode: "light", primary: "#ef9995", primaryFg: "#282425", activeBg: "#fde8e7", activeFg: "#7f1d1d", ring: "#fca5a5", bg: "#e4d8b4", cardBg: "#f7f0d8", textColor: "#282425", borderColor: "#d4b483", mutedText: "#6b5745" },
{ id: "winter", label: "Winter", themeMode: "light", primary: "#047aed", primaryFg: "#fff", activeBg: "#e0f0ff", activeFg: "#0369a1", ring: "#bae6fd", bg: "#fff", cardBg: "#f0f9ff", textColor: "#1e3a5f", borderColor: "#bae6fd", mutedText: "#64748b" },
];
// Aceternity UI accent colour palettes
@@ -123,9 +127,9 @@ export const ACETERNITY_THEMES: ThemeColor[] = [
];
export const HEROUI_MARKETING_THEMES: ThemeColor[] = [
{ id: "purple", label: "Purple", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.08)", activeFg: "#7c3aed", ring: "rgba(124,58,237,0.15)", bg: "#fff" },
{ id: "blue", label: "Blue", primary: "#2563eb", primaryFg: "#fff", activeBg: "rgba(37,99,235,0.08)", activeFg: "#2563eb", ring: "rgba(37,99,235,0.15)", bg: "#fff" },
{ id: "teal", label: "Teal", primary: "#0d9488", primaryFg: "#fff", activeBg: "rgba(13,148,136,0.08)", activeFg: "#0d9488", ring: "rgba(13,148,136,0.15)", bg: "#fff" },
{ id: "dark", label: "Dark", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.2)", activeFg: "#c084fc", ring: "rgba(124,58,237,0.3)", bg: "#09090b", cardBg: "#18181b", textColor: "#f4f4f5", borderColor: "#27272a", mutedText: "#71717a" },
{ id: "modern", label: "Modern", primary: "#06b6d4", primaryFg: "#fff", activeBg: "rgba(6,182,212,0.08)", activeFg: "#06b6d4", ring: "rgba(6,182,212,0.15)", bg: "#fff" },
{ id: "purple", label: "Purple", themeMode: "light", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.08)", activeFg: "#7c3aed", ring: "rgba(124,58,237,0.15)", bg: "#fff" },
{ id: "blue", label: "Blue", themeMode: "light", primary: "#2563eb", primaryFg: "#fff", activeBg: "rgba(37,99,235,0.08)", activeFg: "#2563eb", ring: "rgba(37,99,235,0.15)", bg: "#fff" },
{ id: "teal", label: "Teal", themeMode: "light", primary: "#0d9488", primaryFg: "#fff", activeBg: "rgba(13,148,136,0.08)", activeFg: "#0d9488", ring: "rgba(13,148,136,0.15)", bg: "#fff" },
{ id: "dark", label: "Dark", themeMode: "dark", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.2)", activeFg: "#c084fc", ring: "rgba(124,58,237,0.3)", bg: "#09090b", cardBg: "#18181b", textColor: "#f4f4f5", borderColor: "#27272a", mutedText: "#71717a" },
{ id: "modern", label: "Modern", themeMode: "light", primary: "#06b6d4", primaryFg: "#fff", activeBg: "rgba(6,182,212,0.08)", activeFg: "#06b6d4", ring: "rgba(6,182,212,0.15)", bg: "#fff" },
];