​
Amaç

Headless vitrinler tek frontend kodunu kullanıp tenant’a göre farklı görünüm alabilir. Bu modelde frontend, backend’den gelen tema seçeneklerini runtime’da okur. Örnek kullanım:
  • Tek Next.js reposu ile çok mağazalı vitrin
  • Her mağaza için farklı logo ve renk
  • Tema editörü veya low-code builder entegrasyonu
  • Sektöre göre farklı anasayfa blok sırası

​
Tema seçenekleri

GET /theme/options endpointi tenant’a ait görsel ayarları döndürür. Örnek response: 
{
  "tenant": "velunamora",
  "logo_url": "https://cdn.hemenmagaza.com/velunamora/logo.svg",
  "favicon_url": "https://cdn.hemenmagaza.com/velunamora/favicon.svg",
  "colors": {
    "primary": "#0A0A0A",
    "accent": "#60CF00",
    "background": "#FFFFFF",
    "text": "#111827"
  },
  "font_family": "Inter",
  "homepage_sections": ["hero", "featured-products", "categories", "banners"]
}

​
Frontend uygulama

Next.js tarafında tema seçeneklerini layout seviyesinde okuyup CSS variables olarak basabilirsiniz. 
export function ThemeStyle({ theme }) {
  return (
    <style>{`
      :root {
        --hm-primary: ${theme.colors.primary};
        --hm-accent: ${theme.colors.accent};
        --hm-background: ${theme.colors.background};
        --hm-text: ${theme.colors.text};
      }
    `}</style>
  );
}

​
Tema editörü yazmak

Bir tema editörü geliştirirken önerilen model:
  1. Tenant’ın mevcut tema ayarlarını okuyun.
  2. Kullanıcı değişikliklerini draft state içinde tutun.
  3. Önizleme iframe’ine CSS variables gönderin.
  4. Kaydetmeden önce validasyon yapın.
  5. Publish anında backend’e tema ayarlarını yazın.
  6. Tenant cache invalidation sonucunu kullanıcıya gösterin.

​
Önemli güvenlik sınırı

Tema editörü hiçbir zaman başka tenant’ın medya, logo veya ayarlarını okuyamamalıdır. Her istek tenant bağlamı ve client scope kontrolünden geçmelidir.