From 16766f587dd0a2b3ef13537d2fc94feab1bcbe06 Mon Sep 17 00:00:00 2001 From: Mark Henderson Date: Mon, 2 Mar 2026 13:58:02 -0800 Subject: [PATCH] feat: full palette themes for DaisyUI and HeroUI marketing scaffolds MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DaisyUI scaffold now has 12 named themes (Dark, Light, Cupcake, Bee, Synthwave, Cyberpunk, Retro, Dracula, Night, Forest, Coffee, Winter). Each theme changes the page background, card bg, text, borders, and primary color — swatch shows a split circle of bg+primary so you can preview the full palette at a glance. HeroUI marketing scaffold has 6 prebuilt themes (Purple, Blue, Teal, Rose, Dark, Modern) matching heroui.com/themes. ThemeColor type now supports optional bg/cardBg/textColor/borderColor/ mutedText fields for full-page dark/light palette overrides. Made-with: Cursor --- components/design-scaffolds.tsx | 159 +++++++++++++++++++++++--------- 1 file changed, 115 insertions(+), 44 deletions(-) diff --git a/components/design-scaffolds.tsx b/components/design-scaffolds.tsx index 3568419..735c8fb 100644 --- a/components/design-scaffolds.tsx +++ b/components/design-scaffolds.tsx @@ -35,6 +35,12 @@ export interface ThemeColor { activeBg: string; // sidebar active item bg activeFg: string; // sidebar active item text ring: string; // focus ring / subtle tint + // optional full-page palette (used by DaisyUI & dark themes) + bg?: string; + cardBg?: string; + textColor?: string; + borderColor?: string; + mutedText?: string; } export const SHADCN_THEMES: ThemeColor[] = [ @@ -65,6 +71,22 @@ export const HEROUI_THEMES: ThemeColor[] = [ { id: "orange", label: "Orange", primary: "#ea580c", primaryFg: "#fff", activeBg: "rgba(234,88,12,0.3)", activeFg: "#fdba74", ring: "rgba(249,115,22,0.3)" }, ]; +// DaisyUI named themes — each has a full page palette +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: "bumblebee", label: "Bee", primary: "#e0a82e", primaryFg: "#1f2937", activeBg: "#fef9e5", activeFg: "#92650a", ring: "#fde68a", bg: "#fff", cardBg: "#fff", textColor: "#1f2937", borderColor: "#e5e7eb", mutedText: "#6b7280" }, + { id: "synthwave", label: "Synth", 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: "Cyber", primary: "#ff7598", primaryFg: "#1f2937", activeBg: "#fff0f3", activeFg: "#9d174d", ring: "#fca5a5", bg: "#ffee00", cardBg: "#fff", textColor: "#1f2937", borderColor: "#1f2937", mutedText: "#374151" }, + { 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: "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: "night", label: "Night", primary: "#38bdf8", primaryFg: "#0c1a2b", activeBg: "rgba(56,189,248,0.15)",activeFg: "#38bdf8", ring: "#0284c7", bg: "#1d232a", cardBg: "#191e24", textColor: "#a6adba", borderColor: "#2a323c", mutedText: "#4b5563" }, + { 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: "coffee", label: "Coffee", primary: "#db924b", primaryFg: "#20150e", activeBg: "rgba(219,146,75,0.15)",activeFg: "#db924b", ring: "#92400e", bg: "#20150e", cardBg: "#2a1c12", textColor: "#d1b59c", borderColor: "#3d261a", mutedText: "#78523a" }, + { id: "winter", label: "Winter", primary: "#047aed", primaryFg: "#fff", activeBg: "#e0f0ff", activeFg: "#0369a1", ring: "#bae6fd", bg: "#fff", cardBg: "#f0f9ff", textColor: "#1e3a5f", borderColor: "#bae6fd", mutedText: "#64748b" }, +]; + export const TREMOR_THEMES: ThemeColor[] = [ { id: "blue", label: "Blue", primary: "#2563eb", primaryFg: "#fff", activeBg: "#eff6ff", activeFg: "#1d4ed8", ring: "#bfdbfe" }, { id: "indigo", label: "Indigo", primary: "#4f46e5", primaryFg: "#fff", activeBg: "#eef2ff", activeFg: "#3730a3", ring: "#c7d2fe" }, @@ -80,15 +102,16 @@ function ThemeSwatches({ themes, selected, onSelect }: { onSelect: (t: ThemeColor) => void; }) { return ( -
+
{themes.map(t => ( - +
+ + +
-
-
- ✦ New — v2.0 is here +
+
+ ✦ {theme.label} theme — v2.0
-

Build faster,
ship smarter

-

The all-in-one platform that helps teams build, launch, and scale their products.

-
- - +

Build faster,
ship smarter

+

The all-in-one platform that helps teams build, launch, and scale their products.

+
+ +
-
+
{[{icon:"⚡",title:"Lightning fast",desc:"Deploy in seconds, not hours"},{icon:"🔒",title:"Secure by default",desc:"Enterprise-grade security built in"},{icon:"📈",title:"Scales with you",desc:"From zero to millions of users"}].map(f=>( -
+
{f.icon}
-

{f.title}

-

{f.desc}

+

{f.title}

+

{f.desc}

))}
+
+
+
+
+ +
+
+ {["badge","badge-outline","badge-soft"].map((b,i)=>( + {["Primary","Outline","Soft"][i]} + ))} +
+
+
); } +// Extended HeroUI marketing themes — these match heroui.com/themes prebuilt options +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: "rose", label: "Rose", primary: "#e11d48", primaryFg: "#fff", activeBg: "rgba(225,29,72,0.08)", activeFg: "#e11d48", ring: "rgba(225,29,72,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" }, +]; + export function MarketingHeroUI() { + const [theme, setTheme] = useState(HEROUI_MARKETING_THEMES[0]); + const isDark = theme.id === "dark"; + const bg = theme.bg ?? "#fff"; + const textColor = theme.textColor ?? "#18181b"; + const mutedText = theme.mutedText ?? "#71717a"; + const cardBg = theme.cardBg ?? "#fff"; + const borderColor = theme.borderColor ?? "#f4f4f5"; + return ( -
-