Anpassung

Das Templatical SDK ermöglicht es Ihnen, das Erscheinungsbild des Editors an das Design Ihrer Anwendung anzupassen.

Theme

Plan Feature

Diese Funktion ist nur in den Plänen Growth und Scale verfügbar.

Überschreiben Sie die Standard-Theme-Farben mit einem theme-Objekt. Alle Eigenschaften sind optional — überschreiben Sie nur, was Sie benötigen.

import { init } from '@templatical/embedded';

const editor = await init({
  container: '#email-editor',
  auth: { url: 'https://your-app.com/api/token' },
  theme: {
    bg: '#1a1a2e',
    text: '#eaeaea',
    primary: '#e94560',
    primaryHover: '#c73e54',
    border: '#2a2a4a',
  },
});

Verfügbare Eigenschaften:

Eigenschaft	Beschreibung
bg	Haupthintergrundfarbe
bgElevated	Erhöhter Oberflächen-Hintergrund
bgHover	Hover-Zustand-Hintergrund
bgActive	Aktiv-Zustand-Hintergrund
border	Rahmenfarbe
borderLight	Helle Rahmenfarbe
text	Primäre Textfarbe
textMuted	Gedämpfte Textfarbe
textDim	Abgedunkelte Textfarbe
primary	Primäre Akzentfarbe
primaryHover	Primäre Hover-Farbe
primaryLight	Primäre helle Variante
secondary	Sekundäre Farbe
secondaryHover	Sekundäre Hover-Farbe
secondaryLight	Sekundäre helle Variante
success	Erfolgsfarbe
successLight	Erfolg helle Variante
warning	Warnfarbe
warningLight	Warnung helle Variante
danger	Fehler-/Gefahrfarbe
dangerLight	Gefahr helle Variante
canvasBg	E-Mail-Canvas-Hintergrund

Laufzeit-Aktualisierungen mit setTheme()

Im Gegensatz zur theme-Option, die bei init() übergeben wird und das anfängliche Theme festlegt, ermöglicht setTheme() dynamische Farbänderungen nach der Initialisierung des Editors — z. B. wenn der Benutzer den Dark Mode in Ihrer Anwendung umschaltet oder eine benutzerdefinierte Akzentfarbe auswählt. Nur die übergebenen Eigenschaften werden überschrieben; alle anderen Theme-Werte bleiben unverändert.

// Dark Mode basierend auf Benutzerpräferenz umschalten
editor.setTheme({
  bg: '#0f0f10',
  bgElevated: '#1a1a1c',
  text: '#e4e4e7',
  border: '#2d2d30',
  canvasBg: '#27272a',
});

// Oder nur die Akzentfarbe ändern
editor.setTheme({ primary: '#ff6600', primaryHover: '#e65c00' });

Benutzerdefinierte Schriftarten

Plan Feature

Diese Funktion ist nur in den Plänen Growth und Scale verfügbar.

Konfigurieren Sie benutzerdefinierte Schriftarten, die in der Schriftartenauswahl des Editors verfügbar sind.

const editor = await init({
  container: '#email-editor',
  auth: { url: 'https://your-app.com/api/token' },
  fonts: {
    defaultFont: 'Inter',
    defaultFallback: 'sans-serif',
    customFonts: [
      {
        name: 'Inter',
        url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700',
        fallback: 'sans-serif',
      },
    ],
  },
});

Eigenschaft	Typ	Beschreibung
defaultFont	string	Standard-Schriftartname für neue Inhalte
defaultFallback	string	Fallback-Schriftarten-Stack
customFonts	CustomFont[]	Array von benutzerdefinierten Schriftart-Definitionen
customFonts[].name	string	Name der Schriftfamilie
customFonts[].url	string	URL zum Schriftarten-CSS (z. B. Google Fonts)
customFonts[].fallback	string	Fallback für diese Schriftart