Appearance → Web Theme

§17.5 — Pick one of 6 premium themes. Tenant layout.tsx reads brands.theme_slug (SSR) + dynamic importthemes/{slug}/layout.tsx. Preview → Apply stores localStorage.theme_slug (mock); in prod POST/api/v1/admin/appearance/theme + Cache-Tag: brand:{id} bust + Flutter sync via GET /api/v1/brand/config.

Active: —
Mystic starry sky
Featured
Astro Mystictransparent · gradient-mesh
Astro Mystic
Starlit gradients, glass cards and cosmic mesh for astrology & spiritual brands.
Cormorant Garamond / Interradius 1remglass
--brand-* CSS vars
public/themes/astro-mystic/stock/
Clean clinic reception
Featured
Clinic Cleansolid · clean-center
Clinic Clean
Minimal, trustworthy white + teal — ideal for clinics and healthcare.
Inter / Interradius 0.625rembordered
--brand-* CSS vars
public/themes/clinic-clean/stock/
Soft skincare flatlay
Derma Softfloating · soft-cards
Derma Soft
Peach-pink pastels, floating header and pill cards for beauty & derma.
Playfair Display / DM Sansradius 1.25remsoft
--brand-* CSS vars
public/themes/derma-soft/stock/
Scales of justice
Legal Trustdark · split-trust
Legal Trust
Navy + gold, serif headings and sharp cards for law & consulting.
Merriweather / Source Sans 3radius 0.375remsharp
--brand-* CSS vars
public/themes/legal-trust/stock/
Athlete training in gym
Fitness Energyglass · energy-bold
Fitness Energy
High-contrast lime + orange, bold uppercase hero for gyms & coaching.
Bebas Neue / Interradius 0.75remenergy
--brand-* CSS vars
public/themes/fitness-energy/stock/
Minimal retail shelves
Marketplace Minimalminimal · minimal-grid
Marketplace Minimal
Neutral grid, thin borders and spacious type for marketplaces & catalogs.
Geist / Geistradius 0.75remminimal
--brand-* CSS vars
public/themes/marketplace-minimal/stock/
How preview works
  • Click Select → Apply stores localStorage.theme_slug and cookie theme_slug; tenant layout.tsx also reads X-Brand-Slug header.
  • Preview opens /demo?theme={slug} → SSR [brand]/layout.tsx dynamically imports themes/{slug}/layout.tsx. Fallback: clinic-clean.
  • All stock via https://images.unsplash.com URLs — no local files needed; fallback stock per block type (hero, provider card, product card, testimonial avatar) guaranteed.
Demo → astro-mysticDemo → clinic-cleanBack to marketing Home