Themes

Theme-System

Das Theme-System von Celestia ermöglicht die vollständige visuelle Anpassung an verschiedene Kundenmarken. Durch Design Tokens und konfigurierbare Komponenten entsteht aus derselben Foundation eine Vielzahl einzigartiger Websites.

Architektur-Überblick

Multi-Tenant Design

Celestia unterstützt gleichzeitig verschiedene Themes für verschiedene Kund*innen:

Celestia Core
├── Brand A Theme
├── Brand B Theme
├── Brand C Theme
└── ...

Vorteile:

• Eine Codebase, viele Brands
• Zentrale Updates, individuelle Designs
• Effiziente Wartung
• Konsistente Qualität

Theme-Layering

Layer 1: Core (Unveränderlich)

/* Struktur, Animationen, Utilities */
--transition-fast: 150ms;
--z-index-modal: 100;
--breakpoint-md: 768px;

Layer 2: Brand Primitives (Projektspezifisch)

/* Farben, Fonts, Radien */
--brand-primary: #6b4ee6;
--brand-secondary: #00d9c0;
--font-brand: "Custom Font";

Layer 3: Semantic (Mapping)

/* Kontextuelle Zuordnung */
--color-primary: var(--brand-primary);
--font-heading: var(--font-brand);

Layer 4: Component (Final)

/* Komponentenspezifisch */
--button-primary-bg: var(--color-primary);
--card-border-radius: var(--border-radius-lg);

Standard-Themes

Celestia Base

Das neutrale Basis-Theme ohne Brand-Spezifika:

Charakteristiken:

• Professionell und zeitlos
• Blau als neutrale Primärfarbe
• System-Fonts
• Ausgewogene Radien

Verwendung:

• Als Ausgangspunkt
• Für neutrale/B2B-Kunden
• Wenn keine Brand Guidelines vorhanden

Dark Mode

Systemweite Unterstützung für Dark Themes:

Implementation:

:root {
  /* Light Mode (Default) */
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
}

[data-theme="dark"] {
  /* Dark Mode */
  --color-bg: #0a0a0a;
  --color-text: #fafafa;
}

Regeln:

• Dark Mode muss für jedes Brand-Theme verfügbar sein
• Kontrast-Anforderungen gelten auch im Dark Mode
• Brand-Farben müssen in Dark Mode neu gemappt werden

Kunden-Themes

Theme-Konfiguration

Beispiel: Tech Startup

tech-startup-theme.css

[data-theme="tech-startup"] {
  /* Brand Colors */
  --color-brand-500: #6b4ee6;
  --color-brand-600: #5a3fd4;
  --color-accent: #00d9c0;

  /* Typography */
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Roboto", sans-serif;

  /* Visual Style */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --shadow-card: 0 4px 24px rgba(107, 78, 230, 0.15);
}

Beispiel: Traditionelles Unternehmen

corporate-theme.css

[data-theme="corporate"] {
  /* Brand Colors */
  --color-brand-500: #1e3a5f;
  --color-brand-600: #152a45;
  --color-accent: #b8860b;

  /* Typography */
  --font-heading: "Playfair Display", serif;
  --font-body: "Source Sans Pro", sans-serif;

  /* Visual Style */
  --border-radius-sm: 0px;
  --border-radius-md: 2px;
  --border-radius-lg: 4px;
  --shadow-card: none;
}

Theme-Switching

Build-Time Switching:

astro.config.mjs

export default defineConfig({
  integrations: [
    tailwind({
      config: {
        theme: process.env.BRAND_THEME || "default",
      },
    }),
  ],
});

Runtime Switching (Demo-Zwecke):

function switchTheme(themeName: string) {
  document.documentElement.setAttribute("data-theme", themeName);
  localStorage.setItem("theme", themeName);
}

Theme-Kategorien

Light Themes

Classic Light:

• Weisser Hintergrund
• Dunkler Text (#1a1a1a)
• Subtile Grautöne
• Professionell, klar

Warm Light:

• Cremefarbener Hintergrund (#faf9f7)
• Warme Grautöne
• Gemütliche Atmosphäre
• Lifestyle, Fashion

Cool Light:

• Bläulich-weisser Hintergrund
• Kühle Grautöne
• Technisch, modern
• Tech, B2B

Dark Themes

Classic Dark:

• Dunkelgrau (#1a1a1a) statt Schwarz
• Weisser Text
• Hoher Kontrast
• Professional, edel

Amoled Dark:

• Echtes Schwarz (#000000)
• Maximale Energieeinsparung
• Für Apps und Mobile

Warm Dark:

• Dunkles Sepia
• Warme Akzente
• Gemütlich, lesbar
• Long-form Content

Saisonale und Kampagnen-Themes

Temporäre Themes

Weihnachts-Theme:

[data-theme="christmas-2025"] {
  --color-primary: #c41e3a; /* Rot */
  --color-accent: #2e8b57; /* Grün */
  --decoration-snow: url("/seasonal/snow.svg");
}

Sommer-Theme:

[data-theme="summer-2025"] {
  --color-primary: #ff6b35;
  --color-accent: #00b4d8;
  --animation-speed: 1.2; /* Langsamere, entspannte Animationen */
}

Guidelines für Seasonal Themes:

• Zeitlich begrenzt (1-2 Monate)
• Optional für Nutzer
• Keine Funktionalitäts-Änderungen
• Schnell implementierbar

Advanced Theming

Conditional Themes

Basiert auf Content:

---
const theme = entry.data.category === 'luxury' ? 'premium' : 'standard';
---

<html data-theme={theme}>

Basiert auf User Preference:

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    /* Dark Mode */
  }
}

Component-Specific Themes

Varianten pro Theme:

---
const { theme } = Astro.props;
---

<Card class={`card card--${theme}`}>
  <slot />
</Card>

<style>
  .card--minimal {
    border: 1px solid var(--color-border);
    box-shadow: none;
  }

  .card--elevated {
    border: none;
    box-shadow: var(--shadow-lg);
  }

  .card--brutalist {
    border: 3px solid var(--color-text);
    box-shadow: 4px 4px 0 var(--color-text);
  }
</style>

Theme-Testing

Visual Regression

Wichtig:

• Jede Theme-Variante testen
• Alle Komponenten in allen Themes
• Dark und Light Mode
• Responsive Breakpoints

Tools:

• Chromatic für Theme-Vergleich
• Percy für Multi-Browser Testing
• Manueller Check bei neuen Themes

Accessibility

Kontrast-Prüfung:

• Jede Farbkombination in jedem Theme
• Tools: Stark, axe, WhoCanUse
• Kunden-spezifische Tests

Screenreader:

• Keine Theme-bedingten Unterschiede
• Konsistente ARIA-Labels

Theme-Erstellung

Workflow

1. Discovery:

• Brand Guidelines sammeln
• Bestehende Website analysieren
• Zielgruppe verstehen

2. Design:

• Farbpalette definieren
• Typografie wählen
• Key Components designen
• Moodboard erstellen

3. Token-Definition:

theme-config.js

export default {
  name: "tech-startup",
  colors: {
    primary: "#6B4EE6",
    secondary: "#00D9C0",
    neutral: {
      900: "#1a1a1a",
      100: "#f5f5f5",
    },
  },
  fonts: {
    heading: "Space Grotesk",
    body: "Roboto",
  },
  radii: {
    sm: "4px",
    md: "8px",
    lg: "16px",
  },
};

4. Implementation:

• CSS-Datei generieren
• Fonts einbinden
• Assets optimieren
• Komponenten testen

5. Review & Launch:

• Design QA
• Client Approval
• Performance-Check
• Go-Live

Best Practices

Dos

• Design Tokens konsistent nutzen
• Theme-Struktur dokumentieren
• Alle States in allen Themes testen
• Dark Mode für jedes Theme
• Performance auch bei vielen Themes
• Kunden-Approval einholen
• Fallbacks definieren
• Theme-Varianten versionieren

Don’ts

• Hardcoded Werte in Komponenten
• Themes ohne Testing deployen
• Accessibility für Design opfern
• Zu viele unterschiedliche Themes parallel pflegen
• Ohne Kunden-Feedback finalisieren
• Komplexe Theme-Logik ohne Dokumentation
• Performance-Overhead ignorieren
• Brand-Konsistenz über Seiten hinweg vernachlässigen

---

Themes machen aus einer Foundation unzählige einzigartige Markenerlebnisse. Das Theme-System ist das Herzstück der White-Label-Fähigkeit von Celestia.