feat(themes) : add interactive customization studio with real-time preview and export configuration

sannidhyasahoo · sannidhyasahoo · commit 5bc24802ba1f · 2026-05-28T17:35:42.000+05:30
diff --git a/app/components/CustomizeCTA.tsx b/app/components/CustomizeCTA.tsx
@@ -21,7 +21,7 @@ export function CustomizeCTA() {
 
         <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8 px-8 py-10">
           <div className="flex-1 text-center md:text-left">
-            <p className="text-xs font-bold uppercase tracking-[0.25em] text-emerald-400 mb-3">
+            <p className="text-xs font-bold uppercase tracking-[0.25em] text-emerald-600 dark:text-emerald-400 mb-3">
               Customization Studio
             </p>
             <h2 className="text-2xl md:text-3xl font-extrabold text-black dark:text-white tracking-tight mb-3 leading-snug">
diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
@@ -22,6 +22,7 @@ const NAV_LINKS = [
 
 export default function Navbar() {
   const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
   const [isDark, setIsDark] = useState(() => {
     if (typeof window === 'undefined') return true;
@@ -32,6 +33,11 @@ export default function Navbar() {
   const { shellRef, shellVars, handleMouseEnter, handleMouseMove, handleMouseLeave } =
     useGlowEffect();
 
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setMounted(true);
+  }, []);
+
   useEffect(() => {
     document.documentElement.classList.toggle('dark', isDark);
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
@@ -124,7 +130,15 @@ export default function Navbar() {
                 className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/15 bg-white/5 text-white transition hover:bg-white/10"
                 aria-label="Toggle theme"
               >
-                {isDark ? <Sun size={18} /> : <Moon size={18} />}
+                {mounted ? (
+                  isDark ? (
+                    <Sun size={18} />
+                  ) : (
+                    <Moon size={18} />
+                  )
+                ) : (
+                  <span className="w-[18px] h-[18px]" />
+                )}
               </button>
 
               {NAV_LINKS.map((link) => (
diff --git a/app/customize/components/ControlsPanel.tsx b/app/customize/components/ControlsPanel.tsx
@@ -183,7 +183,7 @@ export function ControlsPanel({
 
   return (
     <div>
-      <p className="text-xs font-bold uppercase tracking-[0.22em] text-emerald-400 mb-4">
+      <p className="text-xs font-bold uppercase tracking-[0.22em] text-emerald-600 dark:text-emerald-400 mb-4">
         Controls
       </p>
 
diff --git a/app/customize/components/ExportPanel.tsx b/app/customize/components/ExportPanel.tsx
@@ -124,7 +124,7 @@ export function ExportPanel({
     <div className="bg-white/70 backdrop-blur-xl border border-black/10 dark:bg-black/35 dark:border-white/10 rounded-[1.75rem] p-6 shadow-[0_20px_60px_rgba(0,0,0,0.15)]">
       <div className="flex flex-col gap-4 mb-5 md:flex-row md:items-center md:justify-between">
         <div>
-          <p className="text-xs font-bold uppercase tracking-[0.22em] text-emerald-400">
+          <p className="text-xs font-bold uppercase tracking-[0.22em] text-emerald-600 dark:text-emerald-400">
             {formatLabel} Export Snippet
           </p>
           <p className="mt-1 text-[11px] text-gray-500 dark:text-white/25">
@@ -145,7 +145,7 @@ export function ExportPanel({
                 aria-pressed={format === option.value}
                 className={`rounded-lg px-3 py-1.5 text-xs font-bold transition-all ${
                   format === option.value
-                    ? 'bg-emerald-500/15 text-emerald-300 shadow-[0_0_24px_rgba(16,185,129,0.16)]'
+                    ? 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 shadow-[0_0_24px_rgba(16,185,129,0.16)]'
                     : 'text-gray-600 hover:text-black bg-gray-100/70 dark:bg-transparent dark:text-white/35 dark:hover:text-white'
                 }`}
               >
diff --git a/app/customize/components/ThemeQuickPresets.tsx b/app/customize/components/ThemeQuickPresets.tsx
@@ -305,7 +305,7 @@ function IconSynthwave({ bg, text, accent }: IC): ReactElement {
   );
 }
 
-function IconGruvbox({ text, accent }: IC): ReactElement {
+function IconGruvbox({ bg, text, accent }: IC): ReactElement {
   return (
     <svg width="22" height="22" viewBox="0 0 28 28" fill="none" aria-hidden="true">
       {/* top handle */}
@@ -327,7 +327,7 @@ function IconGruvbox({ text, accent }: IC): ReactElement {
       {/* lantern body */}
       <rect x="8" y="11" width="12" height="11" rx="2.5" fill={text} opacity="0.82" />
       {/* glass chamber */}
-      <rect x="10.2" y="13" width="7.6" height="6.8" rx="1.5" fill="#1d2021" opacity="0.9" />
+      <rect x="10.2" y="13" width="7.6" height="6.8" rx="1.5" fill={bg} opacity="0.9" />
       {/* warm glow */}
       <ellipse cx="14" cy="16.5" rx="2.8" ry="3.2" fill={accent} opacity="0.95" />
       {/* flame */}
@@ -353,7 +353,145 @@ function IconHighcontrast({ text, accent }: IC): ReactElement {
   );
 }
 
-const ICON_MAP: Record<ThemeKey, (c: IC) => ReactElement> = {
+function IconCatppuccinLatte({ text, accent }: IC): ReactElement {
+  return (
+    <svg width="22" height="22" viewBox="0 0 28 28" fill="none" aria-hidden="true">
+      {/* Cup body */}
+      <path d="M6 10 C6 17, 7 20, 14 20 C21 20, 22 17, 22 10 Z" fill={accent} opacity="0.9" />
+      {/* Cup handle */}
+      <path
+        d="M22 12 C24.5 12, 24.5 16, 22 16"
+        stroke={accent}
+        strokeWidth="2.2"
+        strokeLinecap="round"
+        fill="none"
+      />
+      {/* Latte art / foam */}
+      <ellipse cx="14" cy="10" rx="6.5" ry="1.8" fill={text} opacity="0.9" />
+      {/* Steam lines */}
+      <path
+        d="M11 7 C11 5, 13 5, 13 3"
+        stroke={text}
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        fill="none"
+        opacity="0.6"
+      />
+      <path
+        d="M15 7 C15 5, 17 5, 17 3"
+        stroke={text}
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        fill="none"
+        opacity="0.6"
+      />
+    </svg>
+  );
+}
+
+function IconSolarizedLight({ text, accent }: IC): ReactElement {
+  return (
+    <svg width="22" height="22" viewBox="0 0 28 28" fill="none" aria-hidden="true">
+      <circle cx="14" cy="14" r="5" stroke={accent} strokeWidth="2" opacity="0.95" />
+      <circle cx="14" cy="14" r="2" fill={text} opacity="0.9" />
+      {/* Solar/Astronomical clean geometric rays */}
+      <line x1="14" y1="3" x2="14" y2="6" stroke={accent} strokeWidth="1.8" strokeLinecap="round" />
+      <line
+        x1="14"
+        y1="22"
+        x2="14"
+        y2="25"
+        stroke={accent}
+        strokeWidth="1.8"
+        strokeLinecap="round"
+      />
+      <line x1="3" y1="14" x2="6" y2="14" stroke={accent} strokeWidth="1.8" strokeLinecap="round" />
+      <line
+        x1="22"
+        y1="14"
+        x2="25"
+        y2="14"
+        stroke={accent}
+        strokeWidth="1.8"
+        strokeLinecap="round"
+      />
+      <line
+        x1="6.2"
+        y1="6.2"
+        x2="8.3"
+        y2="8.3"
+        stroke={accent}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        opacity="0.7"
+      />
+      <line
+        x1="19.7"
+        y1="19.7"
+        x2="21.8"
+        y2="21.8"
+        stroke={accent}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        opacity="0.7"
+      />
+      <line
+        x1="19.7"
+        y1="6.2"
+        x2="17.6"
+        y2="8.3"
+        stroke={accent}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        opacity="0.7"
+      />
+      <line
+        x1="6.2"
+        y1="19.7"
+        x2="8.3"
+        y2="17.6"
+        stroke={accent}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        opacity="0.7"
+      />
+    </svg>
+  );
+}
+
+function IconAuroraCyberpunk({ text, accent }: IC): ReactElement {
+  return (
+    <svg width="22" height="22" viewBox="0 0 28 28" fill="none" aria-hidden="true">
+      {/* Cyberpunk double triangles */}
+      <polygon
+        points="14,4 24,20 4,20"
+        stroke={accent}
+        strokeWidth="2.2"
+        strokeLinejoin="round"
+        opacity="0.9"
+      />
+      <polygon
+        points="14,10 20,20 8,20"
+        stroke={text}
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+        opacity="0.7"
+      />
+      <line
+        x1="14"
+        y1="4"
+        x2="14"
+        y2="20"
+        stroke={accent}
+        strokeWidth="1"
+        strokeDasharray="2 2"
+        opacity="0.5"
+      />
+    </svg>
+  );
+}
+
+const ICON_MAP: Record<string, (c: IC) => ReactElement> = {
   dark: (c) => <IconDark {...c} />,
   light: (c) => <IconLight {...c} />,
   neon: (c) => <IconNeon {...c} />,
@@ -367,6 +505,11 @@ const ICON_MAP: Record<ThemeKey, (c: IC) => ReactElement> = {
   synthwave: (c) => <IconSynthwave {...c} />,
   gruvbox: (c) => <IconGruvbox {...c} />,
   highcontrast: (c) => <IconHighcontrast {...c} />,
+  aurora_cyberpunk: (c) => <IconAuroraCyberpunk {...c} />,
+  catppuccin_latte: (c) => <IconCatppuccinLatte {...c} />,
+  solarized_light: (c) => <IconSolarizedLight {...c} />,
+  gruvbox_light: (c) => <IconGruvbox {...c} />,
+  nord_light: (c) => <IconNord {...c} />,
 };
 
 export function ThemeQuickPresets({ theme, onThemeChange }: ThemeQuickPresetsProps): ReactElement {
diff --git a/app/customize/page.tsx b/app/customize/page.tsx
@@ -227,7 +227,7 @@ export default function CustomizePage(): ReactElement {
           <div className="h-4 w-px bg-white/10" />
 
           <div>
-            <span className="text-xs font-bold uppercase tracking-[0.22em] text-emerald-400">
+            <span className="text-xs font-bold uppercase tracking-[0.22em] text-emerald-600 dark:text-emerald-400">
               Customization Studio
             </span>
           </div>
@@ -316,7 +316,7 @@ export default function CustomizePage(): ReactElement {
           >
             {/* Live Preview */}
             <div className="bg-white/70 backdrop-blur-xl border border-black/10 dark:bg-black/35 dark:border-white/10 rounded-[1.75rem] p-6 shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
-              <p className="text-xs font-bold uppercase tracking-[0.22em] text-emerald-400 mb-5">
+              <p className="text-xs font-bold uppercase tracking-[0.22em] text-emerald-600 dark:text-emerald-400 mb-5">
                 Live Preview
               </p>
 
@@ -404,7 +404,9 @@ export default function CustomizePage(): ReactElement {
                       >
                         <span className="text-purple-400">{decodeURIComponent(k)}</span>
                         <span className="text-gray-400 dark:text-white/20">=</span>
-                        <span className="text-emerald-400">{decodeURIComponent(v)}</span>
+                        <span className="text-emerald-600 dark:text-emerald-400">
+                          {decodeURIComponent(v)}
+                        </span>
                       </span>
                     );
                   }
diff --git a/app/documentation/page.tsx b/app/documentation/page.tsx
@@ -165,6 +165,26 @@ const themeDescriptions: Record<
     name: 'High Contrast',
     vibe: 'Ultra-high contrast dark theme with bold orange-red highlights for maximum visibility.',
   },
+
+  catppuccin_latte: {
+    name: 'Catppuccin Latte',
+    vibe: 'A cozy, warm light theme from the popular Catppuccin palette.',
+  },
+
+  solarized_light: {
+    name: 'Solarized Light',
+    vibe: 'The classic Solarized light palette with excellent contrast and retro aesthetics.',
+  },
+
+  gruvbox_light: {
+    name: 'Gruvbox Light',
+    vibe: 'Earthy, warm retro cream background with high-contrast charcoal text.',
+  },
+
+  nord_light: {
+    name: 'Nord Light',
+    vibe: 'Ice-cold and minimal light gray palette with signature arctic-blue accents.',
+  },
 };
 
 const allthemes = Object.entries(themePalette).map(([slug, palette]) => ({
@@ -196,7 +216,7 @@ export default function DocumentationPage() {
 
       <div className="relative mx-auto flex min-h-screen max-w-[1600px] flex-col px-6 pb-10 pt-6 md:px-8">
         <section className="mb-10 rounded-[2rem] border border-black/10 bg-white px-6 py-10 shadow-[0_20px_60px_rgba(0,0,0,0.06)] backdrop-blur dark:border-white/10 dark:bg-white/[0.03] dark:shadow-[0_30px_100px_rgba(0,0,0,0.45)] md:px-10">
-          <div className="mb-6 inline-flex items-center rounded-full border border-emerald-400/20 bg-emerald-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-emerald-300">
+          <div className="mb-6 inline-flex items-center rounded-full border border-emerald-300/30 bg-emerald-50 dark:border-emerald-400/20 dark:bg-emerald-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-emerald-700 dark:text-emerald-300">
             Documentation
           </div>
           <div className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-end">
@@ -306,7 +326,7 @@ export default function DocumentationPage() {
                           key={parameter.name}
                           className="border-t border-black/10 align-top dark:border-white/8"
                         >
-                          <td className="px-4 py-4 font-mono text-sm text-emerald-300">
+                          <td className="px-4 py-4 font-mono text-sm text-emerald-700 dark:text-emerald-300">
                             {parameter.name}
                           </td>
                           <td className="px-4 py-4 text-sm text-gray-700 dark:text-white/70">
@@ -401,7 +421,7 @@ export default function DocumentationPage() {
                   key={note}
                   className="flex gap-3 rounded-[1.25rem] border border-black/10 bg-gray-50 px-4 py-4 dark:border-white/8 dark:bg-black/35"
                 >
-                  <span className="mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-emerald-400 shadow-[0_0_18px_rgba(52,211,153,0.9)]" />
+                  <span className="mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-emerald-500 dark:bg-emerald-400 shadow-[0_0_18px_rgba(52,211,153,0.9)]" />
                   <p className="text-sm leading-7 text-gray-600 dark:text-white/60">{note}</p>
                 </div>
               ))}
@@ -457,7 +477,7 @@ function Panel({
 }) {
   return (
     <section className="rounded-[2rem] border border-black/10 bg-white p-6 shadow-[0_20px_60px_rgba(0,0,0,0.06)] backdrop-blur dark:border-white/10 dark:bg-white/[0.03] dark:shadow-[0_30px_80px_rgba(0,0,0,0.32)] md:p-8">
-      <p className="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-300">
+      <p className="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-600 dark:text-emerald-300">
         {eyebrow}
       </p>
       <h2 className="mt-3 text-2xl font-bold tracking-tight text-black dark:text-white md:text-3xl">
diff --git a/components/ReturnToTop.tsx b/components/ReturnToTop.tsx
@@ -42,7 +42,7 @@ export default function ReturnToTop() {
           exit={{ opacity: 0, y: 20 }}
           transition={{ duration: 0.3 }}
           onClick={scrollToTop}
-          className="fixed bottom-8 right-8 p-3 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white rounded-full shadow-lg hover:shadow-xl transition-shadow duration-300 z-50 flex items-center justify-center"
+          className="fixed bottom-8 right-8 p-3 rounded-full border border-emerald-500/20 bg-white text-emerald-600 hover:bg-emerald-500 hover:text-white hover:border-emerald-500 dark:border-emerald-400/20 dark:bg-black dark:text-emerald-400 dark:hover:bg-emerald-400 dark:hover:text-black dark:hover:border-emerald-400 hover:scale-110 active:scale-95 shadow-[0_4px_20px_rgba(16,185,129,0.15)] dark:shadow-[0_4px_30px_rgba(16,185,129,0.3)] transition-all duration-300 z-50 flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00ffaa] focus-visible:ring-offset-2"
           aria-label="Return to top"
         >
           <ChevronUp size={24} />
diff --git a/lib/svg/themes.ts b/lib/svg/themes.ts
@@ -25,6 +25,10 @@ export const themes: Record<string, BadgeTheme> = {
   gruvbox: makeTheme('282828', 'ebdbb2', 'fe8019'),
   aurora_cyberpunk: makeTheme('090B13', 'EAF2FF', '9D5CFF'),
   highcontrast: makeTheme('0a0a0a', '888888', 'ff4500'),
+  catppuccin_latte: makeTheme('eff1f5', '4c4f69', '1e66f5'),
+  solarized_light: makeTheme('fdf6e3', '586e75', '268bd2'),
+  gruvbox_light: makeTheme('fbf1c7', '3c3836', 'd65d0e'),
+  nord_light: makeTheme('eceff4', '2e3440', '5e81ac'),
 };
 
 // Auto-theme pairs: the SVG switches between these two palettes

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ export default function ReturnToTop() {`
`42`	`42`	`exit={{ opacity: 0, y: 20 }}`
`43`	`43`	`transition={{ duration: 0.3 }}`
`44`	`44`	`onClick={scrollToTop}`
`45`		`- className="fixed bottom-8 right-8 p-3 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white rounded-full shadow-lg hover:shadow-xl transition-shadow duration-300 z-50 flex items-center justify-center"`
	`45`	+ className="fixed bottom-8 right-8 p-3 rounded-full border border-emerald-500/20 bg-white text-emerald-600 hover:bg-emerald-500 hover:text-white hover:border-emerald-500 dark:border-emerald-400/20 dark:bg-black dark:text-emerald-400 dark:hover:bg-emerald-400 dark:hover:text-black dark:hover:border-emerald-400 hover:scale-110 active:scale-95 shadow-[0_4px_20px_rgba(16,185,129,0.15)] dark:shadow-[0_4px_30px_rgba(16,185,129,0.3)] transition-all duration-300 z-50 flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00ffaa] focus-visible:ring-offset-2"
`46`	`46`	`aria-label="Return to top"`
`47`	`47`	`>`
`48`	`48`	`<ChevronUp size={24} />`