Add Cotton Candy theme (#208)

- Register the new color theme in the UI
- Add Cotton Candy light and dark palettes
- Document the theme alongside the existing theme guide

Author: BunsDev

apps/web/src/hooks/useTheme.ts

@@ -9,6 +9,7 @@ type ColorTheme =
   | "carbon"
   | "vapor"
   | "cathedral-circuit"
+  | "cotton-candy"
   | "custom";
 
 type FontFamily = "dm-sans" | "inter" | "plus-jakarta-sans";
@@ -27,6 +28,7 @@ export const COLOR_THEMES: { id: ColorTheme; label: string }[] = [
   { id: "carbon", label: "Carbon" },
   { id: "vapor", label: "Vapor" },
   { id: "cathedral-circuit", label: "Cathedral Circuit" },
+  { id: "cotton-candy", label: "Cotton Candy" },
   { id: "custom", label: "Custom" },
 ];
 
@@ -68,6 +70,7 @@ function getStoredColorTheme(): ColorTheme {
     raw === "carbon" ||
     raw === "vapor" ||
     raw === "cathedral-circuit" ||
+    raw === "cotton-candy" ||
     raw === "custom"
   ) {
     return raw;

apps/web/src/themes.css

@@ -243,6 +243,66 @@
   --warning-foreground: #e8b830;
 }
 
+/* ─── Cotton Candy ─── sweet, dreamy, adorably feminine ─── */
+
+:root.theme-cotton-candy {
+  color-scheme: light;
+  --background: #fef5f8;
+  --foreground: #2e1a2b;
+  --card: #fceef4;
+  --card-foreground: #2e1a2b;
+  --popover: #fceef4;
+  --popover-foreground: #2e1a2b;
+  --primary: oklch(0.65 0.2 340);
+  --primary-foreground: #ffffff;
+  --secondary: rgba(220, 130, 180, 0.07);
+  --secondary-foreground: #2e1a2b;
+  --muted: rgba(180, 160, 220, 0.07);
+  --muted-foreground: #8a7090;
+  --accent: rgba(140, 200, 240, 0.12);
+  --accent-foreground: #2e1a2b;
+  --destructive: #e5486a;
+  --destructive-foreground: #cd2b50;
+  --border: rgba(220, 150, 200, 0.15);
+  --input: rgba(220, 150, 200, 0.18);
+  --ring: oklch(0.65 0.2 340);
+  --info: #7baed4;
+  --info-foreground: #5a90b8;
+  --success: #6cc4a0;
+  --success-foreground: #4aaa82;
+  --warning: #e8b0c0;
+  --warning-foreground: #c88a9a;
+}
+
+:root.theme-cotton-candy.dark {
+  color-scheme: dark;
+  --background: #1a0e18;
+  --foreground: #f2e4ef;
+  --card: #221420;
+  --card-foreground: #f2e4ef;
+  --popover: #221420;
+  --popover-foreground: #f2e4ef;
+  --primary: oklch(0.72 0.18 340);
+  --primary-foreground: #1a0e18;
+  --secondary: rgba(240, 160, 210, 0.07);
+  --secondary-foreground: #f2e4ef;
+  --muted: rgba(200, 170, 240, 0.07);
+  --muted-foreground: #a088a8;
+  --accent: rgba(140, 200, 250, 0.1);
+  --accent-foreground: #f2e4ef;
+  --destructive: #ff6b8a;
+  --destructive-foreground: #ff95aa;
+  --border: rgba(220, 150, 200, 0.1);
+  --input: rgba(220, 150, 200, 0.12);
+  --ring: oklch(0.72 0.18 340);
+  --info: #89cff0;
+  --info-foreground: #a8dcf5;
+  --success: #7dd4b0;
+  --success-foreground: #90e0c0;
+  --warning: #f0b8c8;
+  --warning-foreground: #f5c8d5;
+}
+
 /* ─── Cathedral Circuit ─── sacred machine, techno-gothic ─── */
 
 :root.theme-cathedral-circuit {

docs/themes.md

@@ -109,7 +109,20 @@ The goal is to avoid generic editor skins and instead build themes that feel lik
 
 ---
 
-### 9. Arctic Signal
+### 9. Cotton Candy
+
+**Vibe:** sweet, dreamy, adorably feminine
+**Palette:** pastel pink, baby blue, lavender, soft rose, cream
+
+- Soft pink and baby blue create a whimsical, cotton candy fairground feel
+- Light mode is airy and bright with rosy card backgrounds
+- Dark mode wraps everything in a cozy plum-kissed night
+- Info/accent colors lean baby blue; primary leans hot pink
+- Playful yet legible — sugar rush without the eye strain
+
+---
+
+### 10. Arctic Signal
 
 **Vibe:** crisp, focused, northern  
 **Palette:** icy slate, polar blue, snow glow, aurora green
@@ -120,7 +133,7 @@ The goal is to avoid generic editor skins and instead build themes that feel lik
 
 ---
 
-### 10. Cathedral Circuit
+### 11. Cathedral Circuit
 
 **Vibe:** sacred machine, techno-gothic  
 **Palette:** graphite, sapphire, ruby, emerald, dim gold
@@ -131,7 +144,7 @@ The goal is to avoid generic editor skins and instead build themes that feel lik
 
 ---
 
-### 11. Desert Mirage
+### 12. Desert Mirage
 
 **Vibe:** cinematic, unusual, warm  
 **Palette:** dark bronze-brown, sand, cactus green, sunset coral, twilight violet
@@ -165,6 +178,7 @@ If narrowing to a stronger first shortlist, these feel the most distinctive:
 ### Playful / expressive
 
 - Candy Reactor
+- Cotton Candy
 - Velvet Casino
 
 ### Atmospheric / weird