@deneb-ui/create-template 2.0.70 → 2.0.71

package/bin/index.js

@@ -54,11 +54,121 @@ function copyFolderSync(src, dest) {
   }
 }
 
-function runScaffolding(targetInput) {
+const THEME_PRESETS = {
+  dual: {
+    key: 'dual',
+    name: 'Dual-Mode (Light + Dark Switcher) [Recommended]',
+    theme: {
+      primaryColor: '#016a7e',
+      secondaryColor: '#0a1931',
+      accentColor: '#00adb5',
+      backgroundColor: '#ffffff',
+      textColor: '#0f172a',
+      headingFont: 'Inter',
+      bodyFont: 'Inter',
+      baseSize: '16px',
+      heroMinHeight: '72vh',
+      sectionPadding: '5rem',
+      dark: {
+        backgroundColor: '#090d16',
+        cardBackgroundColor: '#131b2e',
+        textColor: '#f8fafc',
+        borderColor: 'rgba(255, 255, 255, 0.12)',
+        primaryColor: '#00adb5',
+      },
+    },
+  },
+  light: {
+    key: 'light',
+    name: 'Modern Clean (Pure Light Commerce)',
+    theme: {
+      primaryColor: '#2563eb',
+      secondaryColor: '#1e293b',
+      accentColor: '#3b82f6',
+      backgroundColor: '#ffffff',
+      cardBackgroundColor: '#ffffff',
+      textColor: '#0f172a',
+      borderColor: '#e2e8f0',
+      headingFont: 'Inter',
+      bodyFont: 'Inter',
+      baseSize: '16px',
+      heroMinHeight: '72vh',
+      sectionPadding: '5rem',
+    },
+  },
+  dark: {
+    key: 'dark',
+    name: 'Luxury Obsidian (Pure Dark Theme)',
+    theme: {
+      primaryColor: '#6366f1',
+      secondaryColor: '#0f172a',
+      accentColor: '#818cf8',
+      backgroundColor: '#090d16',
+      cardBackgroundColor: '#131b2e',
+      textColor: '#f8fafc',
+      borderColor: 'rgba(255, 255, 255, 0.12)',
+      headingFont: 'Inter',
+      bodyFont: 'Inter',
+      baseSize: '16px',
+      heroMinHeight: '72vh',
+      sectionPadding: '5rem',
+    },
+  },
+  emerald: {
+    key: 'emerald',
+    name: 'Emerald Luxury (Deep Green & Gold)',
+    theme: {
+      primaryColor: '#10b981',
+      secondaryColor: '#064e3b',
+      accentColor: '#d97706',
+      backgroundColor: '#061a14',
+      cardBackgroundColor: '#0c2e24',
+      textColor: '#f0fdf4',
+      borderColor: 'rgba(16, 185, 129, 0.2)',
+      headingFont: 'Inter',
+      bodyFont: 'Inter',
+      baseSize: '16px',
+      heroMinHeight: '72vh',
+      sectionPadding: '5rem',
+    },
+  },
+  cyberpunk: {
+    key: 'cyberpunk',
+    name: 'Cyberpunk Neon (Futuristic Dark)',
+    theme: {
+      primaryColor: '#ec4899',
+      secondaryColor: '#18181b',
+      accentColor: '#06b6d4',
+      backgroundColor: '#09090b',
+      cardBackgroundColor: '#18181b',
+      textColor: '#fafafa',
+      borderColor: 'rgba(236, 72, 153, 0.3)',
+      headingFont: 'Inter',
+      bodyFont: 'Inter',
+      baseSize: '16px',
+      heroMinHeight: '72vh',
+      sectionPadding: '5rem',
+    },
+  },
+};
+
+function resolveThemePreset(input) {
+  if (!input) return THEME_PRESETS.dual;
+  const clean = input.trim().toLowerCase();
+  if (clean === '1' || clean === 'dual') return THEME_PRESETS.dual;
+  if (clean === '2' || clean === 'light') return THEME_PRESETS.light;
+  if (clean === '3' || clean === 'dark') return THEME_PRESETS.dark;
+  if (clean === '4' || clean === 'emerald') return THEME_PRESETS.emerald;
+  if (clean === '5' || clean === 'cyberpunk') return THEME_PRESETS.cyberpunk;
+  return THEME_PRESETS[clean] || THEME_PRESETS.dual;
+}
+
+function runScaffolding(targetInput, chosenThemeKey = 'dual') {
   const targetPath = path.resolve(process.cwd(), targetInput.trim());
   const folderName = path.basename(targetPath);
   const sanitizedPkgName = folderName.toLowerCase().replace(/[^a-z0-9_-]/g, '-');
   const templateDir = path.resolve(__dirname, '..', 'template');
+  const selectedPreset = resolveThemePreset(chosenThemeKey);
 
   if (!fs.existsSync(templateDir)) {
     console.error(`\n\x1b[31mError:\x1b[0m Template directory not found at ${templateDir}`);
@@ -71,6 +181,7 @@ function runScaffolding(targetInput) {
   }
 
   console.log(`\n\x1b[32mCreating DENEB template in:\x1b[0m ${targetPath}...\n`);
+  console.log(`  \x1b[36m🎨 Starter Theme Style:\x1b[0m ${selectedPreset.name}`);
   copyFolderSync(templateDir, targetPath);
 
   // Restore .gitignore if preserved as _gitignore
@@ -91,8 +202,29 @@ function runScaffolding(targetInput) {
     }
   }
 
+  // Inject selected theme into site-data.json
+  const siteDataPath = path.join(targetPath, 'src', 'data', 'site-data.json');
+  if (fs.existsSync(siteDataPath)) {
+    try {
+      const siteData = JSON.parse(fs.readFileSync(siteDataPath, 'utf8'));
+      if (siteData.template && siteData.template.structure) {
+        siteData.template.structure.theme = {
+          ...(siteData.template.structure.theme || {}),
+          ...selectedPreset.theme,
+        };
+      }
+      siteData.theme = {
+        ...(siteData.theme || {}),
+        ...selectedPreset.theme,
+      };
+      fs.writeFileSync(siteDataPath, JSON.stringify(siteData, null, 2) + '\n');
+    } catch {
+      // ignore
+    }
+  }
+
   console.log(`\x1b[32m✔ Template structure created!\x1b[0m`);
-  console.log(`  \x1b[90m- Pre-configured @deneb-ui/ui (Visual editing & smart template components)\x1b[0m`);
+  console.log(`  \x1b[90m- Pre-configured @deneb-ui/ui (ThemeStyles, ThemeToggle & 28+ Editable Components)\x1b[0m`);
   console.log(`  \x1b[90m- Pre-configured @deneb-ui/cli (lab, validate, zip tools)\x1b[0m\n`);
 
   const skipInstall = process.argv.includes('--skip-install');
@@ -135,7 +267,7 @@ function runScaffolding(targetInput) {
   console.log(`\x1b[32m══════════════════════════════════════════════════════════════════════════════\x1b[0m\n`);
   console.log(`Your storefront template is pre-configured with:`);
   console.log(`  \x1b[36m⚡ Next.js 15 App Router\x1b[0m (React 19 + Static Export support)`);
-  console.log(`  \x1b[36m🎨 Tailwind CSS\x1b[0m (Pre-configured tailwind.config.ts & tokens)`);
+  console.log(`  \x1b[36m🎨 Dynamic Theming Engine\x1b[0m (ThemeStyles + ThemeToggle + Zero-FOUC)`);
   console.log(`  \x1b[36m💎 @deneb-ui/ui\x1b[0m (28+ Visual-First Editable Components)`);
   console.log(`  \x1b[36m🛠️ @deneb-ui/cli\x1b[0m (Visual Lab, Preflight Validator & Packager)`);
   console.log(`  \x1b[36m📋 Fivora Manifest\x1b[0m (Version 2 Contract Compliant)\n`);
@@ -163,8 +295,44 @@ function runScaffolding(targetInput) {
 
 printBanner();
 
-if (targetDirInput && targetDirInput.trim() && !targetDirInput.startsWith('-')) {
-  runScaffolding(targetDirInput);
+// Extract CLI flags like --theme=dark or --theme=dual
+let cliTheme = null;
+const themeArg = args.find((a) => a.startsWith('--theme='));
+if (themeArg) {
+  cliTheme = themeArg.split('=')[1];
+}
+
+const positionalTarget = args.find((a) => !a.startsWith('-'));
+const isNonInteractive =
+  !process.stdin.isTTY ||
+  Boolean(process.env.CI) ||
+  args.includes('--yes') ||
+  args.includes('-y') ||
+  args.includes('--non-interactive') ||
+  args.includes('--skip-install');
+
+if (positionalTarget && positionalTarget.trim()) {
+  if (cliTheme || isNonInteractive) {
+    runScaffolding(positionalTarget, cliTheme || 'dual');
+  } else {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+    console.log('⚡ Template Theme Selection:\n');
+    console.log('  \x1b[36m1)\x1b[0m Dual-Mode \x1b[90m(Light + Dark Switcher pre-installed)\x1b[0m \x1b[32m[Recommended]\x1b[0m');
+    console.log('  \x1b[36m2)\x1b[0m Modern Clean \x1b[90m(Pure Light commerce)\x1b[0m');
+    console.log('  \x1b[36m3)\x1b[0m Luxury Obsidian \x1b[90m(Pure Dark theme)\x1b[0m');
+    console.log('  \x1b[36m4)\x1b[0m Emerald Luxury \x1b[90m(Deep Green & Gold)\x1b[0m');
+    console.log('  \x1b[36m5)\x1b[0m Cyberpunk Neon \x1b[90m(Futuristic Dark)\x1b[0m\n');
+
+    rl.question(' \x1b[36m?\x1b[0m \x1b[1mSelect starter theme (1-5, default 1):\x1b[0m ', (themeAns) => {
+      rl.close();
+      runScaffolding(positionalTarget, themeAns.trim() || 'dual');
+    });
+  }
+} else if (isNonInteractive) {
+  runScaffolding('my-deneb-store', cliTheme || 'dual');
 } else {
   const rl = readline.createInterface({
     input: process.stdin,
@@ -173,8 +341,24 @@ if (targetDirInput && targetDirInput.trim() && !targetDirInput.startsWith('-'))
 
   console.log('⚡ Welcome to DENEB UI Template Creator!\n');
   rl.question(' \x1b[36m?\x1b[0m \x1b[1mWhat is your template name?\x1b[0m \x1b[90m(e.g. my-store)\x1b[0m: ', (answer) => {
-    rl.close();
     const name = answer.trim() || 'my-deneb-store';
-    runScaffolding(name);
+    
+    if (cliTheme) {
+      rl.close();
+      runScaffolding(name, cliTheme);
+      return;
+    }
+
+    console.log('\n \x1b[36m?\x1b[0m \x1b[1mSelect starter theme style:\x1b[0m');
+    console.log('  \x1b[36m1)\x1b[0m Dual-Mode \x1b[90m(Light + Dark Switcher pre-installed)\x1b[0m \x1b[32m[Recommended]\x1b[0m');
+    console.log('  \x1b[36m2)\x1b[0m Modern Clean \x1b[90m(Pure Light commerce)\x1b[0m');
+    console.log('  \x1b[36m3)\x1b[0m Luxury Obsidian \x1b[90m(Pure Dark theme)\x1b[0m');
+    console.log('  \x1b[36m4)\x1b[0m Emerald Luxury \x1b[90m(Deep Green & Gold)\x1b[0m');
+    console.log('  \x1b[36m5)\x1b[0m Cyberpunk Neon \x1b[90m(Futuristic Dark)\x1b[0m\n');
+
+    rl.question('  \x1b[1mEnter choice (1-5, default 1):\x1b[0m ', (themeAns) => {
+      rl.close();
+      runScaffolding(name, themeAns.trim() || 'dual');
+    });
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/create-template",
-  "version": "2.0.70",
+  "version": "2.0.71",
   "description": "Scaffold production-ready DENEB UI storefront templates for Next.js in seconds.",
   "bin": {
     "create-deneb-template": "bin/index.js",

package/template/fivora-template.json

@@ -424,6 +424,11 @@
             "key": "submitLabel",
             "type": "text",
             "label": "Submit button"
+          },
+          {
+            "key": "directMessageText",
+            "type": "text",
+            "label": "Direct message label"
           }
         ]
       },

package/template/package.json

@@ -18,7 +18,7 @@
     "next": "15.5.23",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "@deneb-ui/ui": "^2.0.70"
+    "@deneb-ui/ui": "^2.0.71"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.3.6",
@@ -28,7 +28,7 @@
     "eslint": "9.39.5",
     "eslint-config-next": "15.5.23",
     "typescript": "5.8.3",
-    "@deneb-ui/cli": "^2.0.70",
+    "@deneb-ui/cli": "^2.0.71",
     "tailwindcss": "^3.4.17",
     "postcss": "8.5.26",
     "autoprefixer": "^10.4.20"

package/template/src/app/about_us/page.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { HeritageCollage } from '@deneb-ui/ui';
+import { HeritageCollage, EditableText, EditableImage } from '@deneb-ui/ui';
 import { contentObject, contentText, contentList, useSiteData } from '@/lib/siteDataContext';
-import { withBasePath } from '@/lib/utils';
 
 export default function AboutPage() {
   const siteData = useSiteData();
@@ -13,14 +12,29 @@ export default function AboutPage() {
     <div data-preview-page-key="about_us">
       <section className="page-section split" data-design-section="about">
         <div className="split-copy">
-          <h1 className="section-title" data-preview-field-path="about.heading">{contentText(about.heading)}</h1>
-          <p data-preview-field-path="about.body">{contentText(about.body)}</p>
+          <EditableText
+            variant="h1"
+            size="4xl"
+            weight="bold"
+            color="heading"
+            className="section-title"
+            data-preview-field-path="about.heading"
+            defaultValue={contentText(about.heading)}
+          />
+          <EditableText
+            variant="lead"
+            color="muted"
+            data-preview-field-path="about.body"
+            defaultValue={contentText(about.body)}
+          />
         </div>
-        <img
+        <EditableImage
           className="split-image"
-          src={withBasePath(contentText(about.imageUrl) || '/placeholder.svg')}
-          alt=""
+          src={contentText(about.imageUrl) || '/placeholder.svg'}
+          alt="About DENEB-UI"
           data-preview-field-path="about.imageUrl"
+          radius="xl"
+          fit="cover"
         />
       </section>
 

package/template/src/app/contact/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, type FormEvent } from 'react';
-import { MapLink } from '@deneb-ui/ui';
+import { MapLink, EditableText, EditableBox } from '@deneb-ui/ui';
 import { contentObject, contentText, useSiteData } from '@/lib/siteDataContext';
 
 export default function ContactPage() {
@@ -15,6 +15,10 @@ export default function ContactPage() {
     contentText(contact.mapUrl) ||
     contentText(contact.addressUrl);
   const address = contentText(contact.address);
+  const phone = contentText(contact.phone);
+  const email = contentText(contact.email);
+  const whatsapp = contentText(contact.whatsapp);
+  const directMessageText = contentText(contact.directMessageText) || 'Chat on WhatsApp';
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -49,47 +53,114 @@ export default function ContactPage() {
   return (
     <div data-preview-page-key="contact">
       <section className="page-section page-heading" data-design-section="contact-heading">
-        <h1 data-preview-field-path="contact.heading">{contentText(contact.heading)}</h1>
-        <p data-preview-field-path="contact.intro">{contentText(contact.intro)}</p>
+        <EditableText
+          variant="h1"
+          size="4xl"
+          weight="bold"
+          color="heading"
+          data-preview-field-path="contact.heading"
+          defaultValue={contentText(contact.heading)}
+        />
+        <EditableText
+          variant="lead"
+          color="muted"
+          data-preview-field-path="contact.intro"
+          defaultValue={contentText(contact.intro)}
+        />
       </section>
+
       <section className="page-section contact-grid" data-design-section="contact-details">
-        <div className="contact-details">
-          <a href={`tel:${contentText(contact.phone)}`} data-preview-field-path="contact.phone">{contentText(contact.phone)}</a>
-          <a href={`mailto:${contentText(contact.email)}`} data-preview-field-path="contact.email">{contentText(contact.email)}</a>
-          <p data-preview-field-path="contact.address">{address}</p>
-          <MapLink
-            mapUrl={directionsUrl}
-            address={address}
-            label={directionsLabel}
-            labelFieldPath="contact.directionsLabel"
-            urlFieldPath="contact.directionsUrl"
-            variant="outline"
-            size="md"
+        <EditableBox className="card contact-details" balance radius="xl">
+          <EditableText
+            variant="h3"
+            size="xl"
+            weight="bold"
+            color="heading"
+            defaultValue="Direct Information"
           />
-        </div>
-        <form
-          className="contact-form"
-          onSubmit={handleSubmit}
-          data-fivora-contact-disabled
-        >
-          <h2 data-preview-field-path="contact.formTitle">{contentText(contact.formTitle)}</h2>
-          <label data-preview-static>
-            Name
-            <input type="text" name="name" autoComplete="name" />
-          </label>
-          <label data-preview-static>
-            Email
-            <input type="email" name="email" autoComplete="email" />
-          </label>
-          <label data-preview-static>
-            Message
-            <textarea name="message" rows={5} />
-          </label>
-          <button type="submit" className="button-primary">
-            <span data-preview-field-path="contact.submitLabel">{contentText(contact.submitLabel)}</span>
-          </button>
-          <p role="status" aria-live="polite">{status}</p>
-        </form>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginTop: '0.5rem' }}>
+            {phone && (
+              <a href={`tel:${phone}`} data-preview-field-path="contact.phone">
+                {phone}
+              </a>
+            )}
+            {email && (
+              <a href={`mailto:${email}`} data-preview-field-path="contact.email">
+                {email}
+              </a>
+            )}
+            {address && (
+              <EditableText
+                variant="p"
+                color="muted"
+                data-preview-field-path="contact.address"
+                defaultValue={address}
+              />
+            )}
+          </div>
+          <div style={{ marginTop: '1.5rem', display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
+            <MapLink
+              mapUrl={directionsUrl}
+              address={address}
+              label={directionsLabel}
+              labelFieldPath="contact.directionsLabel"
+              urlFieldPath="contact.directionsUrl"
+              variant="outline"
+              size="md"
+            />
+            {whatsapp && (
+              <a
+                href={`https://wa.me/${whatsapp.replace(/[^0-9]/g, '')}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="button-secondary"
+              >
+                <span data-preview-field-path="contact.directMessageText">
+                  {directMessageText}
+                </span>
+              </a>
+            )}
+          </div>
+        </EditableBox>
+
+        <EditableBox className="card" balance radius="xl">
+          <form
+            className="contact-form"
+            onSubmit={handleSubmit}
+            data-fivora-contact-disabled
+          >
+            <EditableText
+              variant="h2"
+              size="2xl"
+              weight="bold"
+              color="heading"
+              data-preview-field-path="contact.formTitle"
+              defaultValue={contentText(contact.formTitle)}
+            />
+            <label data-preview-static>
+              Name
+              <input type="text" name="name" autoComplete="name" required />
+            </label>
+            <label data-preview-static>
+              Email
+              <input type="email" name="email" autoComplete="email" required />
+            </label>
+            <label data-preview-static>
+              Message
+              <textarea name="message" rows={4} required />
+            </label>
+            <button type="submit" className="button-primary" style={{ marginTop: '0.5rem' }}>
+              <span data-preview-field-path="contact.submitLabel">
+                {contentText(contact.submitLabel)}
+              </span>
+            </button>
+            {status && (
+              <p role="status" aria-live="polite" style={{ marginTop: '0.75rem', fontSize: '0.9rem' }}>
+                {status}
+              </p>
+            )}
+          </form>
+        </EditableBox>
       </section>
     </div>
   );

package/template/src/app/globals.css

@@ -6,6 +6,11 @@
   color-scheme: light;
 }
 
+html.dark,
+.dark {
+  color-scheme: dark;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -18,6 +23,7 @@ body {
   margin: 0;
   background: var(--page-background, #ffffff);
   color: var(--page-text, #0f172a);
+  transition: background-color 0.25s ease, color 0.25s ease;
 }
 
 button,
@@ -252,10 +258,11 @@ h3 {
 
 .card {
   padding: 1.4rem;
-  border: 1px solid color-mix(in srgb, var(--page-text) 12%, transparent);
+  border: 1px solid var(--card-border, color-mix(in srgb, var(--page-text) 12%, transparent));
   border-radius: 1.35rem;
-  background: var(--page-background);
+  background: var(--card-bg, var(--page-background));
   box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--brand-secondary) 8%, transparent);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease, border-color 0.25s ease;
 }
 
 .card h3 {
@@ -347,10 +354,11 @@ h3 {
 .contact-form textarea {
   width: 100%;
   padding: 0.85rem 1rem;
-  border: 1px solid color-mix(in srgb, var(--page-text) 20%, transparent);
+  border: 1px solid var(--input-border, color-mix(in srgb, var(--page-text) 20%, transparent));
   border-radius: 0.8rem;
-  background: var(--page-background);
-  color: var(--page-text);
+  background: var(--input-bg, var(--page-background));
+  color: var(--input-color, var(--page-text));
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .site-footer {
@@ -442,81 +450,3 @@ h3 {
   transform: scale(1.06) translateY(-4px);
 }
 
-/* Developer Quickstart Guide Section */
-.dev-guide-section {
-  border-top: 1px solid color-mix(in srgb, var(--page-text) 10%, transparent);
-  border-bottom: 1px solid color-mix(in srgb, var(--page-text) 10%, transparent);
-  background: color-mix(in srgb, var(--brand-color) 4%, var(--page-background));
-}
-
-.dev-guide-header {
-  text-align: center;
-  max-width: 44rem;
-  margin: 0 auto 2.5rem;
-}
-
-.dev-badge {
-  display: inline-block;
-  padding: 0.35rem 0.9rem;
-  border-radius: 999px;
-  font-size: 0.8rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  background: color-mix(in srgb, var(--brand-color) 15%, transparent);
-  color: var(--brand-color);
-  margin-bottom: 0.85rem;
-}
-
-.dev-command-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 1.5rem;
-}
-
-.dev-cmd-card {
-  padding: 1.5rem;
-  border-radius: 1rem;
-  background: var(--page-background);
-  border: 1px solid color-mix(in srgb, var(--page-text) 12%, transparent);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
-}
-
-.dev-cmd-card:hover {
-  transform: translateY(-3px);
-  border-color: var(--brand-accent);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-color) 15%, transparent);
-}
-
-.dev-cmd-card .cmd-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.75rem;
-  gap: 0.5rem;
-}
-
-.dev-cmd-card .cmd-tag {
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--brand-color);
-}
-
-.dev-cmd-card code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 0.85rem;
-  font-weight: 700;
-  padding: 0.2rem 0.5rem;
-  border-radius: 0.35rem;
-  background: color-mix(in srgb, var(--page-text) 8%, transparent);
-  color: var(--page-text);
-}
-
-.dev-cmd-card p {
-  margin: 0;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  color: color-mix(in srgb, var(--page-text) 70%, transparent);
-}

package/template/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
 import siteData from '@/data/site-data.json';
-import { SiteDataProvider } from '@/lib/siteDataContext';
+import { SiteDataProvider, ThemeStyles } from '@/lib/siteDataContext';
 import SiteChrome from '@/components/SiteChrome';
 import './globals.css';
 import '../fonts/deneb-fonts.css';
@@ -15,8 +15,14 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {
+  const initialTheme =
+    (siteData as any)?.template?.structure?.theme || (siteData as any)?.theme;
+
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <ThemeStyles theme={initialTheme} enableDualMode />
+      </head>
       <body suppressHydrationWarning>
         <SiteDataProvider initialSiteData={siteData}>
           <SiteChrome>{children}</SiteChrome>

package/template/src/components/SiteChrome.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import { usePathname } from 'next/navigation';
 import { useSiteData } from '@/lib/siteDataContext';
 import { Navbar, Footer, AnnouncementBar, FloatingContactWidget, getThemeCssProperties } from '@deneb-ui/ui';
+import { ThemeToggle } from './ThemeToggle';
 
 export default function SiteChrome({ children }: { children: ReactNode }) {
   const siteData = useSiteData();
@@ -19,6 +20,9 @@ export default function SiteChrome({ children }: { children: ReactNode }) {
       <main>{children}</main>
       <Footer />
       <FloatingContactWidget />
+      <div className="fixed bottom-6 left-6 z-40">
+        <ThemeToggle showLabel className="shadow-lg backdrop-blur-md" />
+      </div>
     </div>
   );
 }

package/template/src/components/ThemeToggle.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export interface ThemeToggleProps {
+  className?: string;
+  showLabel?: boolean;
+}
+
+/**
+ * Built-in ThemeToggle Component for DENEB Storefront Templates.
+ * Toggles the `.dark` class on the root <html> element and persists preference to localStorage.
+ */
+export function ThemeToggle({ className = '', showLabel = false }: ThemeToggleProps) {
+  const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const hasDarkClass = document.documentElement.classList.contains('dark');
+    const storedTheme = typeof window !== 'undefined' ? localStorage.getItem('deneb-theme') : null;
+    const prefersDark = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
+
+    const activeDark = storedTheme ? storedTheme === 'dark' : hasDarkClass || prefersDark;
+    setIsDark(activeDark);
+    if (activeDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    const nextDark = !isDark;
+    setIsDark(nextDark);
+    if (nextDark) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('deneb-theme', 'dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('deneb-theme', 'light');
+    }
+  };
+
+  if (!mounted) {
+    return (
+      <button
+        type="button"
+        aria-label="Toggle theme"
+        className={`w-9 h-9 rounded-lg border border-[var(--border-color,#e2e8f0)] bg-[var(--card-bg,#ffffff)] opacity-0 transition-opacity ${className}`}
+      />
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      className={`inline-flex items-center justify-center gap-2 h-9 px-2.5 rounded-lg border border-[var(--border-color,rgba(0,0,0,0.1))] bg-[var(--card-bg,#ffffff)] text-[var(--text-color,#0f172a)] hover:border-[var(--color-primary,#016a7e)] hover:text-[var(--color-primary,#016a7e)] shadow-sm transition-all duration-200 cursor-pointer ${className}`}
+    >
+      {isDark ? (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4 text-amber-400">
+          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+        </svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4 text-amber-500">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2" />
+          <path d="M12 20v2" />
+          <path d="m4.93 4.93 1.41 1.41" />
+          <path d="m17.66 17.66 1.41 1.41" />
+          <path d="M2 12h2" />
+          <path d="M20 12h2" />
+          <path d="m6.34 17.66-1.41 1.41" />
+          <path d="m19.07 4.93-1.41 1.41" />
+        </svg>
+      )}
+      {showLabel && (
+        <span className="text-xs font-medium">{isDark ? 'Dark' : 'Light'}</span>
+      )}
+    </button>
+  );
+}
+
+export default ThemeToggle;

package/template/src/data/site-data.json

@@ -1,17 +1,17 @@
 {
   "project": {
-    "id": "starter-demo",
-    "slug": "starter-demo",
-    "title": "Fivora Starter Demo",
+    "id": "deneb-portfolio-showcase",
+    "slug": "deneb-portfolio-showcase",
+    "title": "DENEB UI — Showcase & Portfolio",
     "status": "APPROVED"
   },
   "merchant": {
-    "businessName": "Fivora Store",
-    "description": "A modern high-converting digital storefront built on the Fivora platform."
+    "businessName": "DENEB UI Showcase",
+    "description": "The visual-first React framework for high-converting storefronts and modern digital portfolios. Powered by DENEB-UI in collaboration with FIVORA."
   },
   "template": {
-    "id": "starter-template",
-    "name": "Fivora Starter",
+    "id": "deneb-portfolio-template",
+    "name": "DENEB UI Portfolio Showcase",
     "engine": "NEXT_STATIC_EXPORT",
     "structure": {
       "pages": [
@@ -30,7 +30,17 @@
         "bodyFont": "Inter",
         "baseSize": "16px",
         "heroMinHeight": "72vh",
-        "sectionPadding": "5rem"
+        "sectionPadding": "5rem",
+        "borderRadius": "12px",
+        "dark": {
+          "backgroundColor": "#090d16",
+          "cardBackgroundColor": "#131b2e",
+          "textColor": "#f8fafc",
+          "borderColor": "rgba(255, 255, 255, 0.12)",
+          "primaryColor": "#00adb5",
+          "secondaryColor": "#1e293b",
+          "accentColor": "#38bdf8"
+        }
       }
     }
   },
@@ -45,8 +55,8 @@
   },
   "content": {
     "common": {
-      "websiteTitle": "Fivora Store",
-      "shortDescription": "Next-generation commerce templates built for the Fivora with reusable components and strict visual editing.",
+      "websiteTitle": "DENEB UI — Showcase & Portfolio",
+      "shortDescription": "The visual-first React framework for modern storefronts and digital portfolios. Powered by DENEB-UI in collaboration with FIVORA.",
       "logoUrl": "/fivora-logo.png",
       "headerCtaLabel": "Contact Us",
       "navLabels": {
@@ -55,111 +65,126 @@
         "services": "Services",
         "contact": "Contact"
       },
-      "footerHeading": "Build something extraordinary with Fivora.",
-      "copyright": "Fivora. All rights reserved.",
+      "footerHeading": "Build something extraordinary with DENEB-UI & FIVORA.",
+      "copyright": "DENEB-UI. All rights reserved. Collaborate with FIVORA.",
       "socialMedia": {
-        "twitter": "https://twitter.com",
-        "github": "https://github.com",
+        "twitter": "https://twitter.com/denebui",
+        "github": "https://github.com/deneb-ui",
         "linkedin": "https://linkedin.com",
         "instagram": "https://instagram.com"
       }
     },
     "home": {
-      "heroEyebrow": "⚡ Fivora Template Starter",
-      "heroTitle": "Design Stores That Captivate",
-      "heroSummary": "Built with @deneb-ui/ui. Hot-reload locally, simulate merchant visual editing in the Lab, validate preflight contracts, and package with 1-click.",
+      "heroEyebrow": "⚡ DENEB UI FRAMEWORK",
+      "heroTitle": "The Visual-First React Framework for High-Converting Experiences",
+      "heroSummary": "Design, build, and ship web storefronts and portfolios with 100% atomic editable components, auto-balancing layouts, and instant dual-mode aesthetics. Built in collaboration with FIVORA Cloud.",
       "bannerImageUrl": "/fivora-icon.svg",
-      "primaryCtaLabel": "Explore Services",
-      "secondaryCtaLabel": "About This Starter",
-      "introTitle": "Engineered for high conversion and effortless editing",
-      "introBody": "Every editable value comes directly from Fivora site data with auto-balancing layouts, responsive typography, and strict contract validation out of the box.",
-      "featuresHeading": "Why build with the Fivora Authoring Kit?",
+      "primaryCtaLabel": "Explore Showcase",
+      "secondaryCtaLabel": "About DENEB-UI",
+      "introTitle": "Engineered for visual perfection and effortless editing",
+      "introBody": "Every editable value comes directly from structured site data with auto-balancing layouts, responsive typography, and strict contract validation out of the box.",
+      "featuresHeading": "Why build with the DENEB-UI Authoring Kit?",
       "features": [
         {
-          "title": "Auto-Balancing Layouts",
-          "body": "Cards, grids, and containers automatically balance and fill space seamlessly across all screen sizes."
+          "title": "100% Atomic DENEB Components",
+          "body": "Pre-built, accessible, high-converting components with responsive design token integration and zero runtime overhead."
         },
         {
           "title": "Strict Visual Editing",
-          "body": "Direct bindings enable merchants to click, edit, and preview changes without breaking template styles."
+          "body": "Direct bidirectional field bindings enable instant visual customization in the Lab and on the FIVORA platform without breaking styles."
+        },
+        {
+          "title": "Instant Dual-Mode Aesthetics",
+          "body": "Seamless light and dark mode out-of-the-box with intelligent token contrast calculations for typography and surfaces."
         },
         {
-          "title": "1-Click Clean Packaging",
-          "body": "Built-in zip command strips heavy caches, node_modules, and git files so uploads pass instantly."
+          "title": "FIVORA Cloud Collaboration",
+          "body": "Built-in integration for collaborative editing, marketplace publishing, and automated zero-dependency clean packaging."
         }
       ],
       "demoPreOrderCta": [
         {
-          "buttonLabel": "Book a Demo",
+          "buttonLabel": "Book a Consultation",
           "buttonUrl": "https://wa.me/94771234567"
         }
       ],
-      "productsHeading": "Featured Store Products",
-      "productsSummary": "Live inventory and pricing updated in real time from your Fivora Shop Owner panel."
+      "productsHeading": "Featured Portfolio & Templates",
+      "productsSummary": "Explore high-converting storefronts, portals, and templates engineered with DENEB-UI and verified for production."
     },
     "about": {
-      "heading": "Built for the next generation of online storefronts",
-      "body": "The Fivora connects businesses with high-converting, beautifully crafted templates. This starter template demonstrates clean monorepo architecture, responsive typography, and auto-balancing components.",
+      "heading": "Empowering Developers to Build Visually Editable Web Experiences",
+      "body": "DENEB UI was created by Chamika Gayashan & Induranga Kawishwara to bridge the gap between developer-grade React code and effortless visual editing. In collaboration with the FIVORA platform, we empower creators to ship ultra-fast static web applications while giving non-technical teams an intuitive live visual editor.",
       "imageUrl": "/placeholder.svg",
-      "collageHeading": "Our story in pictures",
-      "collageDescription": "A quick visual tour of how we design, build, and ship merchant-ready storefronts.",
-      "historyHeading": "Where we started",
-      "history": "We began as a small team helping local businesses move online. Today our templates power visual editing labs, strict Fivora contracts, and one-click packaging for developers worldwide.",
+      "collageHeading": "The DENEB-UI Journey",
+      "collageDescription": "A visual tour of our architecture, design system engineering, and cloud deployment pipeline.",
+      "historyHeading": "Our Engineering Philosophy",
+      "history": "We believe modern web developers shouldn't have to choose between code elegance and visual customization. DENEB-UI provides atomic, contract-bound components that compile to lean Next.js static exports, backed by FIVORA Cloud for instant real-time publishing.",
       "collageImages": [
         {
-          "id": "studio",
+          "id": "design-system",
           "image": "/placeholder.svg",
-          "caption": "Design studio"
+          "caption": "Atomic Design System"
         },
         {
-          "id": "build",
+          "id": "visual-engine",
           "image": "/placeholder.svg",
-          "caption": "Build & test"
+          "caption": "Live Visual Engine"
         },
         {
-          "id": "ship",
+          "id": "cloud-publish",
           "image": "/placeholder.svg",
-          "caption": "Ship to Fivora"
+          "caption": "FIVORA Cloud Publishing"
         }
       ]
     },
     "servicesPage": {
-      "heading": "Template Services & Capabilities",
-      "intro": "Each service card is an atomic component featuring an image, heading, description, and repeatable checklist."
+      "heading": "Framework Solutions & Capabilities",
+      "intro": "Every capability is backed by atomic DENEB components, automated packaging, and preflight verification."
     },
     "services": [
       {
         "id": "visual-editing",
         "name": "Visual Editing Lab",
-        "description": "Simulate how merchants customize your template in real time with the built-in local development lab.",
+        "description": "Simulate how merchants customize your template in real time with the built-in local development lab and field focus bridge.",
         "imageUrl": "/placeholder.svg",
         "features": [
           "Zero-server static preview",
           "Field focus bridge",
-          "Instant feedback"
+          "Instant visual feedback"
         ]
       },
       {
         "id": "clean-packaging",
         "name": "Automated Packager",
-        "description": "Automatically produce clean, upload-ready ZIP archives excluding junk and cache files.",
+        "description": "Automatically produce clean, upload-ready ZIP archives excluding junk, build caches, and sensitive files.",
         "imageUrl": "/placeholder.svg",
         "features": [
           "Excludes node_modules",
           "Excludes .next and .git",
           "100% preflight compliant"
         ]
+      },
+      {
+        "id": "dual-mode-system",
+        "name": "Dual-Mode Theme Engine",
+        "description": "Harmonic light and dark themes generated automatically with smart contrast adjustments for high visual appeal.",
+        "imageUrl": "/placeholder.svg",
+        "features": [
+          "Auto contrast calculations",
+          "ThemeToggle component",
+          "Persistent theme storage"
+        ]
       }
     ],
     "contact": {
-      "heading": "Get in touch with our team",
-      "intro": "Have questions about building or customizing Fivora templates? Contact us today.",
+      "heading": "Connect with the DENEB-UI Team",
+      "intro": "Have questions about DENEB-UI components or building custom storefronts with the FIVORA platform? Contact us today.",
       "phone": "+94 11 234 5678",
-      "email": "developer@fivora.lk",
+      "email": "hello@deneb-ui.dev",
       "address": "Colombo, Sri Lanka",
       "directionsLabel": "Get Directions",
       "directionsUrl": "https://maps.app.goo.gl/example",
-      "formTitle": "Send an enquiry",
+      "formTitle": "Send an Inquiry",
       "submitLabel": "Send Message",
       "directMessageText": "Send us a direct message",
       "whatsapp": "+94 77 123 4567"
@@ -167,38 +192,38 @@
     "products": [
       {
         "id": "prod-1",
-        "name": "Minimalist Ceramic Cup",
-        "description": "Handcrafted matte ceramic cup for your daily espresso or pour-over brew.",
-        "price": 3200,
-        "compareAtPrice": 4000,
+        "name": "Aura Luxury Storefront",
+        "description": "High-converting boutique and jewelry storefront template with dark aesthetics, before/after sliders, and quick checkout.",
+        "price": 4900,
+        "compareAtPrice": 6500,
         "currency": "LKR",
         "imageUrl": "/placeholder.svg",
-        "category": "Ceramics",
-        "badge": "Bestseller",
+        "category": "E-Commerce",
+        "badge": "Popular",
         "isAvailable": true
       },
       {
         "id": "prod-2",
-        "name": "Artisan Linen Apron",
-        "description": "Durable pure washed linen apron with deep front utility pockets.",
-        "price": 5400,
-        "compareAtPrice": 6200,
+        "name": "Apex SaaS & Analytics",
+        "description": "Clean, high-performance web template tailored for developer tools, SaaS metrics, and responsive pricing grids.",
+        "price": 6200,
+        "compareAtPrice": 7500,
         "currency": "LKR",
         "imageUrl": "/placeholder.svg",
-        "category": "Kitchen",
-        "badge": "New",
+        "category": "Technology",
+        "badge": "Featured",
         "isAvailable": true
       },
       {
         "id": "prod-3",
-        "name": "Botanical Room Spray",
-        "description": "Natural essential oil room mist infused with wild lavender and cedarwood.",
-        "price": 2800,
+        "name": "Zenith Artisan Portfolio",
+        "description": "Minimalist digital portfolio template featuring auto-balancing photo galleries, quote cards, and WhatsApp contact integration.",
+        "price": 3800,
         "compareAtPrice": null,
         "currency": "LKR",
         "imageUrl": "/placeholder.svg",
-        "category": "Aromatherapy",
-        "badge": null,
+        "category": "Portfolio",
+        "badge": "New",
         "isAvailable": true
       }
     ]
@@ -206,16 +231,16 @@
   "media": {},
   "seo": null,
   "siteInstance": {
-    "id": "starter-demo-instance",
-    "slug": "starter-demo",
-    "domain": "starter-demo.fivora.site",
-    "subdomain": "starter-demo",
+    "id": "deneb-portfolio-showcase-instance",
+    "slug": "deneb-portfolio-showcase",
+    "domain": "deneb-showcase.fivora.site",
+    "subdomain": "deneb-showcase",
     "customDomain": null,
-    "liveUrl": "https://starter-demo.fivora.site"
+    "liveUrl": "https://deneb-showcase.fivora.site"
   },
   "api": {
     "baseUrl": "https://api.fivora.site",
-    "catalogUrl": "https://api.fivora.site/site-catalog/starter-demo/live-data",
+    "catalogUrl": "https://api.fivora.site/site-catalog/deneb-portfolio-showcase/live-data",
     "contactUrl": "https://api.fivora.site/site-contact",
     "analyticsUrl": "https://api.fivora.site/site-analytics/page-view"
   }

package/template/src/lib/siteDataContext.tsx

@@ -2,6 +2,7 @@
 
 export {
   SiteDataProvider,
+  ThemeStyles,
   useSiteData,
   useProducts,
   useServices,
@@ -28,4 +29,5 @@ export type {
   SiteInstanceData,
   ProductItem,
   ServiceItem,
+  TemplateTheme,
 } from '@deneb-ui/ui';