create-nextblock 0.14.2 → 0.14.5

package/templates/nextblock-template/app/cms/settings/global-css/page.tsx

@@ -1,24 +1,40 @@
-// app/cms/settings/global-css/page.tsx
-import { getGlobalCss } from './actions';
-import GlobalCssForm from './components/GlobalCssForm';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
-
-export default async function GlobalCssSettingsPage() {
-  const css = await getGlobalCss();
-
-  return (
-    <div className="max-w-4xl mx-auto">
-        <Card>
-            <CardHeader>
-                <CardTitle>Global CSS</CardTitle>
-                <CardDescription>
-                    Inject custom CSS rules dynamically across the entire application front-end.
-                </CardDescription>
-            </CardHeader>
-            <CardContent>
-                <GlobalCssForm initialCss={css} />
-            </CardContent>
-        </Card>
-    </div>
-  );
-}
+// app/cms/settings/global-css/page.tsx
+import { getGlobalCss } from './actions';
+import { getSiteThemes } from './theme-actions';
+import GlobalCssForm from './components/GlobalCssForm';
+import ThemeManager from './components/ThemeManager';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
+
+export default async function GlobalCssSettingsPage() {
+  const [css, themes] = await Promise.all([getGlobalCss(), getSiteThemes()]);
+
+  return (
+    <div className="mx-auto max-w-6xl space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Themes</CardTitle>
+          <CardDescription>
+            Recolour the themes visitors can pick from the switcher, or add your own. Changes apply
+            site-wide without a redeploy.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ThemeManager initialThemes={themes} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Global CSS</CardTitle>
+          <CardDescription>
+            Inject custom CSS rules dynamically across the entire application front-end. Loaded after
+            the themes above, so it can override any of them.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <GlobalCssForm initialCss={css} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/settings/global-css/theme-actions.ts

@@ -0,0 +1,259 @@
+// app/cms/settings/global-css/theme-actions.ts
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import { revalidatePath, revalidateTag } from 'next/cache';
+import type { SettingsActionResult } from '../../../../lib/cms/action-result';
+import { isValidThemeSlug, type SiteTheme } from '../../../../lib/themes/buildThemeCss';
+import { isThemeTokenKey, isValidTokenValue, THEME_TOKEN_KEYS } from '../../../../lib/themes/tokens';
+
+const THEME_COLUMNS =
+  'id, slug, name, description, icon, color_scheme, tokens, extra_css, is_system, is_default, is_active, sort_order';
+
+/** Theme edits are ADMIN-only — RLS enforces it too, this is the friendly error. */
+async function requireAdmin() {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    return { supabase, error: 'You must be logged in to manage themes.' as const };
+  }
+
+  const { data: profile, error: profileError } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .single();
+
+  if (profileError || !profile || profile.role !== 'ADMIN') {
+    return { supabase, error: 'Only administrators can manage themes.' as const };
+  }
+  return { supabase, error: null };
+}
+
+function revalidateThemes() {
+  revalidateTag('public-layout-site-themes', 'max');
+  revalidatePath('/', 'layout');
+}
+
+export async function getSiteThemes(): Promise<SiteTheme[]> {
+  const supabase = createClient();
+  const { data, error } = await supabase.from('site_themes').select(THEME_COLUMNS).order('sort_order');
+  if (error || !data) return [];
+  return data as unknown as SiteTheme[];
+}
+
+/**
+ * Keep only known tokens with well-formed values. Anything else is dropped
+ * rather than rejected, so a partially-filled form still saves what it can.
+ */
+function sanitizeTokens(input: unknown): Record<string, string> {
+  if (!input || typeof input !== 'object' || Array.isArray(input)) return {};
+  const out: Record<string, string> = {};
+  for (const [key, value] of Object.entries(input as Record<string, unknown>)) {
+    if (typeof value !== 'string') continue;
+    const trimmed = value.trim();
+    if (isThemeTokenKey(key) && isValidTokenValue(key, trimmed)) {
+      out[key] = trimmed;
+    }
+  }
+  return out;
+}
+
+export interface ThemeInput {
+  name: string;
+  slug?: string;
+  description?: string | null;
+  icon?: string;
+  color_scheme?: 'light' | 'dark';
+  tokens?: Record<string, string>;
+  extra_css?: string | null;
+  is_active?: boolean;
+  is_default?: boolean;
+  sort_order?: number;
+}
+
+export async function createTheme(input: ThemeInput): Promise<SettingsActionResult & { slug?: string }> {
+  const { supabase, error: authError } = await requireAdmin();
+  if (authError) return { ok: false, error: authError };
+
+  const slug = (input.slug ?? input.name ?? '')
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+
+  if (!isValidThemeSlug(slug)) {
+    return {
+      ok: false,
+      error: 'Theme id must be 2-40 characters, lowercase letters, numbers and dashes, starting with a letter.',
+    };
+  }
+  if (!input.name?.trim()) {
+    return { ok: false, error: 'Theme name is required.' };
+  }
+
+  const { error } = await supabase.from('site_themes').insert({
+    slug,
+    name: input.name.trim(),
+    description: input.description?.trim() || null,
+    icon: input.icon || 'Palette',
+    color_scheme: input.color_scheme === 'dark' ? 'dark' : 'light',
+    tokens: sanitizeTokens(input.tokens),
+    extra_css: input.extra_css?.trim() || null,
+    is_active: input.is_active ?? true,
+    is_default: false,
+    is_system: false,
+    sort_order: input.sort_order ?? 100,
+  });
+
+  if (error) {
+    if (error.code === '23505') {
+      return { ok: false, error: `A theme with the id "${slug}" already exists.` };
+    }
+    console.error('Error creating theme:', error);
+    return { ok: false, error: 'Failed to create theme.' };
+  }
+
+  revalidateThemes();
+  return { ok: true, message: `Theme "${input.name.trim()}" created.`, slug };
+}
+
+export async function updateTheme(id: string, input: ThemeInput): Promise<SettingsActionResult> {
+  const { supabase, error: authError } = await requireAdmin();
+  if (authError) return { ok: false, error: authError };
+
+  if (!input.name?.trim()) {
+    return { ok: false, error: 'Theme name is required.' };
+  }
+
+  // `slug` and `is_system` are intentionally not updatable: the slug is the CSS
+  // class and the value persisted in each visitor's localStorage by next-themes,
+  // so renaming it would silently reset everyone's chosen theme.
+  const patch: Record<string, unknown> = {
+    name: input.name.trim(),
+    description: input.description?.trim() || null,
+    icon: input.icon || 'Palette',
+    color_scheme: input.color_scheme === 'dark' ? 'dark' : 'light',
+    extra_css: input.extra_css?.trim() || null,
+  };
+  if (input.tokens !== undefined) patch.tokens = sanitizeTokens(input.tokens);
+  if (input.is_active !== undefined) patch.is_active = input.is_active;
+  if (input.sort_order !== undefined) patch.sort_order = input.sort_order;
+
+  const { error } = await supabase.from('site_themes').update(patch).eq('id', id);
+
+  if (error) {
+    console.error('Error updating theme:', error);
+    return { ok: false, error: 'Failed to update theme.' };
+  }
+
+  revalidateThemes();
+  return { ok: true, message: 'Theme saved.' };
+}
+
+export async function setDefaultTheme(id: string): Promise<SettingsActionResult> {
+  const { supabase, error: authError } = await requireAdmin();
+  if (authError) return { ok: false, error: authError };
+
+  // A hidden theme cannot be the site default.
+  const { error } = await supabase
+    .from('site_themes')
+    .update({ is_default: true, is_active: true })
+    .eq('id', id);
+
+  if (error) {
+    console.error('Error setting default theme:', error);
+    return { ok: false, error: 'Failed to set the default theme.' };
+  }
+
+  revalidateThemes();
+  return { ok: true, message: 'Default theme updated.' };
+}
+
+export async function deleteTheme(id: string): Promise<SettingsActionResult> {
+  const { supabase, error: authError } = await requireAdmin();
+  if (authError) return { ok: false, error: authError };
+
+  const { data: theme, error: readError } = await supabase
+    .from('site_themes')
+    .select('slug, name, is_system, is_default')
+    .eq('id', id)
+    .single();
+
+  if (readError || !theme) {
+    return { ok: false, error: 'Theme not found.' };
+  }
+  if (theme.is_system) {
+    return {
+      ok: false,
+      error: `"${theme.name}" is a system theme. Light and Dark are what "System" resolves to, so they cannot be deleted — but you can recolour them freely.`,
+    };
+  }
+  if (theme.is_default) {
+    return { ok: false, error: 'Make another theme the default before deleting this one.' };
+  }
+
+  const { error } = await supabase.from('site_themes').delete().eq('id', id);
+  if (error) {
+    console.error('Error deleting theme:', error);
+    return { ok: false, error: 'Failed to delete theme.' };
+  }
+
+  revalidateThemes();
+  return { ok: true, message: `Theme "${theme.name}" deleted. Visitors using it fall back to the default.` };
+}
+
+export async function duplicateTheme(id: string): Promise<SettingsActionResult & { slug?: string }> {
+  const { supabase, error: authError } = await requireAdmin();
+  if (authError) return { ok: false, error: authError };
+
+  const { data: source, error: readError } = await supabase
+    .from('site_themes')
+    .select(THEME_COLUMNS)
+    .eq('id', id)
+    .single();
+
+  if (readError || !source) {
+    return { ok: false, error: 'Theme not found.' };
+  }
+
+  const theme = source as unknown as SiteTheme;
+  // Find a free slug: my-theme-copy, my-theme-copy-2, ...
+  const { data: existing } = await supabase.from('site_themes').select('slug');
+  const taken = new Set((existing ?? []).map((row) => row.slug));
+  let slug = `${theme.slug}-copy`.slice(0, 40);
+  let n = 2;
+  while (taken.has(slug)) {
+    slug = `${theme.slug}-copy-${n}`.slice(0, 40);
+    n += 1;
+  }
+
+  const { error } = await supabase.from('site_themes').insert({
+    slug,
+    name: `${theme.name} copy`,
+    description: theme.description,
+    icon: theme.icon,
+    color_scheme: theme.color_scheme,
+    tokens: sanitizeTokens(theme.tokens),
+    extra_css: theme.extra_css,
+    is_active: true,
+    is_default: false,
+    is_system: false,
+    sort_order: (theme.sort_order ?? 0) + 1,
+  });
+
+  if (error) {
+    console.error('Error duplicating theme:', error);
+    return { ok: false, error: 'Failed to duplicate theme.' };
+  }
+
+  revalidateThemes();
+  return { ok: true, message: `Created "${theme.name} copy".`, slug };
+}
+
+/** Exposed so the client form can render inputs for exactly what the server accepts. */
+export async function getThemeTokenKeys(): Promise<string[]> {
+  return THEME_TOKEN_KEYS;
+}

package/templates/nextblock-template/app/layout.tsx

@@ -13,6 +13,12 @@ import { ConsentGatedAnalytics } from '../components/privacy/ConsentGatedAnalyti
 import { ConsentBanner } from '../components/privacy/ConsentBanner';
 import { getPrivacySettings } from '../lib/privacy/settings';
 import { DEFAULT_PRIVACY_SETTINGS } from '../lib/privacy/types';
+import {
+  activeThemeSlugs,
+  buildThemeCss,
+  defaultThemeSlug,
+  type SiteTheme,
+} from '../lib/themes/buildThemeCss';
 import { DeferredSpeedInsights } from '../components/DeferredSpeedInsights';
 import { DeferredVisualEditing } from '../components/visual-editing/DeferredVisualEditing';
 import {
@@ -169,6 +175,25 @@ const getCachedGlobalCss = unstable_cache(
   { revalidate: PUBLIC_LAYOUT_REVALIDATE_SECONDS }
 );
 
+const getCachedSiteThemes = unstable_cache(
+  async (): Promise<SiteTheme[]> => {
+    const supabase = createStaticSupabaseClient();
+    const { data, error } = await supabase
+      .from('site_themes')
+      .select('id, slug, name, description, icon, color_scheme, tokens, extra_css, is_system, is_default, is_active, sort_order')
+      .order('sort_order');
+
+    if (error || !data) {
+      // A missing table (pre-migration install) must not take the site down —
+      // libs/ui/src/styles/theme.css still ships a working fallback palette.
+      return [];
+    }
+    return data as unknown as SiteTheme[];
+  },
+  ['public-layout-site-themes'],
+  { revalidate: PUBLIC_LAYOUT_REVALIDATE_SECONDS, tags: ['public-layout-site-themes'] }
+);
+
 const getCachedTranslations = unstable_cache(
   async () => {
     const supabase = createStaticSupabaseClient();
@@ -298,6 +323,7 @@ async function loadLayoutData() {
       siteTitle: 'NextBlock',
       isEcommerceActive: false,
       globalCss: '',
+      siteThemes: [] as SiteTheme[],
       privacySettings: DEFAULT_PRIVACY_SETTINGS,
       footerAttributionEnabled: true,
       rememberVisitorChoice: DEFAULT_LANGUAGE_DETECTION_SETTINGS.rememberVisitorChoice,
@@ -324,6 +350,7 @@ async function loadLayoutData() {
     currenciesResult,
     copyrightSettingsResult,
     globalCssResult,
+    siteThemesResult,
     translationsResult,
     isEcommerceActive,
     privacySettings,
@@ -336,6 +363,7 @@ async function loadLayoutData() {
       en: '(c) {year} Nextblock CMS. All rights reserved.',
     })),
     getCachedGlobalCss().catch(() => ''),
+    getCachedSiteThemes().catch(() => [] as SiteTheme[]),
     getCachedTranslations().catch(() => []),
     verifyPackageOnline('ecommerce').catch(() => false),
     getPrivacySettings().catch(() => DEFAULT_PRIVACY_SETTINGS),
@@ -369,6 +397,7 @@ async function loadLayoutData() {
   const copyrightText = templateForLocale.replace('{year}', new Date().getFullYear().toString());
 
   const globalCss = typeof globalCssResult === 'string' ? globalCssResult : '';
+  const siteThemes = Array.isArray(siteThemesResult) ? siteThemesResult : [];
   const translations = Array.isArray(translationsResult) ? translationsResult : [];
 
   const hasSupabaseEnv = isSupabaseConfigured();
@@ -404,6 +433,7 @@ async function loadLayoutData() {
     siteTitle,
     isEcommerceActive,
     globalCss,
+    siteThemes,
     privacySettings,
     footerAttributionEnabled,
     rememberVisitorChoice: languageDetectionSettings.rememberVisitorChoice,
@@ -486,10 +516,25 @@ export default async function RootLayout({
     siteTitle,
     isEcommerceActive,
     globalCss,
+    siteThemes,
     privacySettings,
     footerAttributionEnabled,
     rememberVisitorChoice,
   } = await loadLayoutData();
+  // Themes are rendered server-side into <head> so the palette is correct on the
+  // very first paint, before next-themes' blocking script adds the html class.
+  const themeCss = buildThemeCss(siteThemes);
+  const themeSlugs = activeThemeSlugs(siteThemes);
+  const initialTheme = defaultThemeSlug(siteThemes);
+  const themeCatalog = siteThemes
+    .filter((theme) => theme.is_active)
+    .sort((a, b) => a.sort_order - b.sort_order)
+    .map((theme) => ({
+      slug: theme.slug,
+      name: theme.name,
+      icon: theme.icon,
+      colorScheme: theme.color_scheme,
+    }));
   const draft = await draftMode();
   // GTM container id comes solely from the privacy settings row (site_settings).
   // There is intentionally no NEXT_PUBLIC_GTM_ID env fallback — analytics is
@@ -517,6 +562,7 @@ export default async function RootLayout({
     <html lang={serverDeterminedLocale} suppressHydrationWarning>
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {themeCss && <style id="nb-theme-tokens" dangerouslySetInnerHTML={{ __html: themeCss }} />}
         {globalCss && <style dangerouslySetInnerHTML={{ __html: globalCss }} />}
       </head>
       <body className="min-h-screen">
@@ -545,6 +591,9 @@ export default async function RootLayout({
           rememberVisitorChoice={rememberVisitorChoice}
           translations={translations}
           nonce={nonce}
+          themeSlugs={themeSlugs}
+          initialTheme={initialTheme}
+          themeCatalog={themeCatalog}
         >
           <ToasterProvider />
           <AppShell

package/templates/nextblock-template/app/lib/sitemap-utils.ts

@@ -1,4 +1,5 @@
 import { getSsgSupabaseClient } from '@nextblock-cms/db/server';
+import { buildPublishedAtOrFilter } from '@nextblock-cms/utils';
 import { getHomepageTranslationGroupId } from './homepage';
 
 /**
@@ -164,7 +165,8 @@ export async function fetchAllPublishedPages(): Promise<SitemapEntry[]> {
       supabase
         .from('pages')
         .select('slug, updated_at, language_id, translation_group_id')
-        .eq('status', 'published'),
+        .eq('status', 'published')
+        .or(buildPublishedAtOrFilter()),
       fetchLanguageMap(supabase),
       getHomepageTranslationGroupId(supabase),
     ]);
@@ -200,13 +202,12 @@ export async function fetchAllPublishedPages(): Promise<SitemapEntry[]> {
 export async function fetchAllPublishedPosts(): Promise<SitemapEntry[]> {
   const supabase = getSsgSupabaseClient();
   try {
-    const nowIso = new Date().toISOString();
     const [{ data: posts, error }, languageMap] = await Promise.all([
       supabase
         .from('posts')
         .select('slug, updated_at, language_id, translation_group_id')
         .eq('status', 'published')
-        .or(`published_at.is.null,published_at.lte.${nowIso}`),
+        .or(buildPublishedAtOrFilter()),
       fetchLanguageMap(supabase),
     ]);
 
@@ -238,7 +239,8 @@ export async function fetchAllActiveProducts(): Promise<SitemapEntry[]> {
       supabase
         .from('products')
         .select('slug, updated_at, created_at, language_id, translation_group_id')
-        .eq('status', 'active'),
+        .eq('status', 'active')
+        .or(buildPublishedAtOrFilter()),
       fetchLanguageMap(supabase),
     ]);
 

package/templates/nextblock-template/app/lib/ucp/server.ts

@@ -1,6 +1,7 @@
 import 'server-only';
 
 import { getServiceRoleSupabaseClient, verifyPackageOnline } from '@nextblock-cms/db/server';
+import { buildPublishedAtOrFilter } from '@nextblock-cms/utils';
 import {
   getDefaultCurrency,
   inferCurrencyCodeFromLocale,
@@ -1099,6 +1100,7 @@ export async function searchCatalogProducts(body: unknown, request: Request) {
     .from('products')
     .select(PRODUCT_SELECT, { count: 'exact' })
     .eq('status', 'active')
+    .or(buildPublishedAtOrFilter())
     .order('created_at', { ascending: false })
     .range(pagination.offset, pagination.offset + pagination.limit - 1);
 
@@ -1192,7 +1194,7 @@ async function selectRowsByField(
 
   let query = client.from(table).select(select).in(field, values);
   if (table === 'products') {
-    query = query.eq('status', 'active');
+    query = query.eq('status', 'active').or(buildPublishedAtOrFilter());
   }
 
   const { data } = await query;
@@ -1251,6 +1253,7 @@ async function resolveProductRowsByIdentifiers(ids: string[]): Promise<{
     .from('products')
     .select(PRODUCT_SELECT)
     .eq('status', 'active')
+    .or(buildPublishedAtOrFilter())
     .in('id', productIds);
 
   if (error) {

package/templates/nextblock-template/app/page.tsx

@@ -3,6 +3,7 @@ import { cookies, draftMode, headers } from 'next/headers';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
 import { createClient, getSsgSupabaseClient } from '@nextblock-cms/db/server';
+import { buildPublishedAtOrFilter } from '@nextblock-cms/utils';
 import PageClientContent from './[slug]/PageClientContent';
 import { getPageDataBySlug } from './[slug]/page.utils';
 import BlockRenderer from '../components/BlockRenderer';
@@ -56,7 +57,7 @@ async function resolveHomepageData(preferredLocale: string) {
       .limit(1);
 
     if (!draft.isEnabled) {
-      siblingQuery = siblingQuery.eq('status', 'published');
+      siblingQuery = siblingQuery.eq('status', 'published').or(buildPublishedAtOrFilter());
     }
 
     const { data: sibling } = await siblingQuery.maybeSingle();
@@ -131,7 +132,8 @@ export async function generateMetadata(): Promise<Metadata> {
       .from('pages')
       .select('language_id, slug')
       .eq('translation_group_id', pageData.translation_group_id)
-      .eq('status', 'published'),
+      .eq('status', 'published')
+      .or(buildPublishedAtOrFilter()),
   ]);
 
   const { data: languages } = languagesResult;
@@ -188,7 +190,8 @@ export default async function RootPage() {
       .from('pages')
       .select('slug, languages!inner(code)')
       .eq('translation_group_id', pageData.translation_group_id)
-      .eq('status', 'published');
+      .eq('status', 'published')
+      .or(buildPublishedAtOrFilter());
 
     if (translations) {
       translations.forEach((translation: PageTranslation) => {

package/templates/nextblock-template/app/product/[slug]/page.tsx

@@ -8,6 +8,7 @@ import {
   resolveTranslatedText,
 } from '@nextblock-cms/ecommerce';
 import { getSsgSupabaseClient, verifyPackageOnline } from '@nextblock-cms/db/server';
+import { LIVE_STATUS, buildPublishedAtOrFilter, isPubliclyVisible } from '@nextblock-cms/utils';
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
 import { draftMode, cookies, headers } from 'next/headers';
@@ -124,7 +125,16 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
   const { data: product } = await getProductBySlug(supabase, slug, preferredLocale);
   const productRecord = product as any;
 
-  if (!productRecord || productRecord.status !== 'active') return { title: 'Product Not Found' };
+  if (
+    !productRecord ||
+    !isPubliclyVisible({
+      status: productRecord.status,
+      publishedAt: productRecord.published_at,
+      liveStatus: LIVE_STATUS.product,
+    })
+  ) {
+    return { title: 'Product Not Found' };
+  }
   
   // Resolve image URL for OG Image
   let imageUrl = undefined;
@@ -147,6 +157,8 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
       .select('language_id, slug')
       .eq('translation_group_id', productRecord.translation_group_id)
       .eq('status', 'active')
+      // Never advertise a scheduled translation via hreflang.
+      .or(buildPublishedAtOrFilter())
   ]);
 
   const { data: languages } = languagesResult;
@@ -225,11 +237,23 @@ export default async function ProductPage({ params }: ProductPageProps) {
   const { data: product } = await getProductBySlug(supabase, slug, preferredLocale);
   let productRecord = product as any;
 
-  if (!productRecord || productRecord.status !== 'active') {
+  const draft = await draftMode();
+
+  // Draft mode is how the CMS previews a product before it is public, so it must
+  // reach draft and scheduled rows — everyone else only sees active products whose
+  // go-live moment has passed.
+  if (
+    !productRecord ||
+    (!draft.isEnabled &&
+      !isPubliclyVisible({
+        status: productRecord.status,
+        publishedAt: productRecord.published_at,
+        liveStatus: LIVE_STATUS.product,
+      }))
+  ) {
     notFound();
   }
 
-  const draft = await draftMode();
   const visualEditingEnabled =
     draft.isEnabled || process.env.NEXTBLOCK_VISUAL_EDITING_ENABLED === 'true';
 

package/templates/nextblock-template/app/providers.tsx

@@ -15,6 +15,7 @@ if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
 import { AuthProvider } from '../context/AuthContext';
 import { LanguageProvider, useLanguage } from '../context/LanguageContext';
 import { CurrentContentProvider } from '../context/CurrentContentContext';
+import { ThemeCatalogProvider } from '../context/ThemeCatalogContext';
 import { DeferredCartTranslator } from '../components/DeferredCartTranslator';
 import { CurrencyProvider } from '@nextblock-cms/ecommerce/CurrencyProvider';
 import { TranslationsProvider } from '@nextblock-cms/utils';
@@ -46,9 +47,20 @@ export function Providers({ children, ...props }: { children: React.ReactNode;[k
     initialDefaultLanguage,
     rememberVisitorChoice,
     translations,
-    nonce
+    nonce,
+    themeSlugs,
+    initialTheme,
+    themeCatalog,
   } = props;
 
+  // Themes come from the site_themes table. Fall back to the three that ship in
+  // libs/ui/src/styles/theme.css if the table is empty or unreachable, so the
+  // switcher never renders an empty list.
+  const resolvedThemes: string[] =
+    Array.isArray(themeSlugs) && themeSlugs.length > 0 ? themeSlugs : ['light', 'dark', 'vibrant'];
+  const resolvedDefault: string =
+    typeof initialTheme === 'string' && resolvedThemes.includes(initialTheme) ? initialTheme : 'light';
+
   return (
     <AuthProvider serverUser={serverUser} serverProfile={serverProfile}>
       <LanguageProvider
@@ -67,13 +79,13 @@ export function Providers({ children, ...props }: { children: React.ReactNode;[k
             <TranslationBridge translations={translations}>
               <ThemeProvider
                 attribute="class"
-                defaultTheme="light"
+                defaultTheme={resolvedDefault}
                 enableSystem
                 disableTransitionOnChange
                 nonce={nonce}
-                themes={['light', 'dark', 'vibrant']}
+                themes={resolvedThemes}
               >
-                {children}
+                <ThemeCatalogProvider themes={themeCatalog}>{children}</ThemeCatalogProvider>
               </ThemeProvider>
             </TranslationBridge>
           </CurrentContentProvider>