Tema-systemet

Tema-systemet (preset-baseret)

Hvert site-layout i TesseraCMS har 5 hand-picked theme presets med harmonierende paletter. Editor vælger en preset via /admin/theme og kan derefter override enkelte farver oven på preset hvis ønsket. Sitet bevarer altid en sikker baseline — der er ingen risiko for "tom" theme.

Sådan virker preset-systemet

  1. Vælg en preset — øverst på /admin/theme ses 5 visuelle preset-cards med mini-preview af baggrund, heading, body, accent. Klik for at vælge.
  2. Override individuelle farver — under preset-picker'en kan editor justere bg / surface / brødtekst / sekundær tekst / border / accent / overskrift. Hvert felt viser preset's farve som baseline når feltet er tomt.
  3. Live preview — højre kolonne viser en realistisk preview af det aktive valg. Klik på elementer i preview for at hoppe direkte til det matchende farve-felt.
  4. Reset til preset — knappen "Nulstil til preset" rydder alle override-felter på én gang.

Per layout

Layout Bruger Antal presets Default
creator-classic Creator portfolios (kunstnere, kreatører) 5 Midnight
artsite-classic Klassiske kunstner-sider 5 Paper White
riding-club-classic Rideklub / heritage-brand-sider 5 Heritage Black
docs-classic Dokumentations-sider 5 GitHub Light

Eksempel — skift fra mørk til lys creator-portfolio

På en creator-portfolio (default Midnight, sort baggrund + lilla accent):

  1. Gå til /[dit-tenant]/admin/theme
  2. Klik Bone-preset (varm cream-baggrund med terracotta-accent)
  3. Klik Gem tema
  4. Public site har nu en helt anden visuel identitet

For udviklere — LayoutThemeBinding

Hver layout-modul registrerer en LayoutThemeBinding der mapper preset's 7 semantiske farve-vars (bg/surface/text/textMuted/heading/border/accent) til layoutens egen CSS-var-konvention. Eksempel for creator-classic:

registerLayoutThemeBinding({
  layoutId: "creator-classic",
  scopeSelector: ".theme-creator-classic",
  emitVars: (preset) => [
    `--cp-bg: ${preset.vars.bg};`,
    `--cp-surface: ${preset.vars.surface};`,
    `--cp-text: ${preset.vars.text};`,
    `--cp-accent: ${preset.vars.accent};`,
    // ... etc
  ],
});

buildThemeCss(theme, layoutPackage) slår binding op + emitter preset's var-set + tenant's tweaks ovenpå med !important.

Se også