managarten/apps-archived/uload/docs/cards/themes.md

Card System Themes

Übersicht

Themes definieren das visuelle Erscheinungsbild von Karten. Sie umfassen Farben, Typografie, Abstände, Schatten und Animationen.

Theme-Struktur

ThemeConfig Interface

interface ThemeConfig {
	id?: string;
	name?: string;
	colors?: {
		primary?: string; // Primärfarbe
		secondary?: string; // Sekundärfarbe
		accent?: string; // Akzentfarbe
		background?: string; // Hintergrundfarbe
		surface?: string; // Oberflächenfarbe
		text?: string; // Textfarbe
		textMuted?: string; // Gedämpfte Textfarbe
		border?: string; // Rahmenfarbe
		hover?: string; // Hover-Farbe
		// Weitere custom Farben möglich
	};
	typography?: {
		fontFamily?: string;
		fontSize?: {
			xs?: string;
			sm?: string;
			md?: string;
			lg?: string;
			xl?: string;
		};
		fontWeight?: {
			light?: number;
			normal?: number;
			medium?: number;
			semibold?: number;
			bold?: number;
		};
		lineHeight?: {
			tight?: string;
			normal?: string;
			relaxed?: string;
		};
	};
	spacing?: {
		xs?: string;
		sm?: string;
		md?: string;
		lg?: string;
		xl?: string;
	};
	borderRadius?: {
		none?: string;
		sm?: string;
		md?: string;
		lg?: string;
		xl?: string;
		full?: string;
	};
	shadows?: {
		none?: string;
		sm?: string;
		md?: string;
		lg?: string;
		xl?: string;
	};
}

Vordefinierte Themes

Default Theme

const defaultTheme = {
	name: 'Default',
	colors: {
		primary: '#3b82f6',
		secondary: '#8b5cf6',
		accent: '#ec4899',
		background: '#ffffff',
		surface: '#f9fafb',
		text: '#111827',
		textMuted: '#6b7280',
		border: '#e5e7eb',
		hover: '#f3f4f6'
	},
	typography: {
		fontFamily: 'Inter, sans-serif',
		fontSize: {
			xs: '0.75rem',
			sm: '0.875rem',
			md: '1rem',
			lg: '1.125rem',
			xl: '1.25rem'
		}
	},
	spacing: {
		xs: '0.25rem',
		sm: '0.5rem',
		md: '1rem',
		lg: '1.5rem',
		xl: '2rem'
	},
	borderRadius: {
		sm: '0.25rem',
		md: '0.5rem',
		lg: '0.75rem',
		xl: '1rem',
		full: '9999px'
	}
};

Dark Theme

const darkTheme = {
	name: 'Dark',
	colors: {
		primary: '#60a5fa',
		secondary: '#a78bfa',
		accent: '#f472b6',
		background: '#111827',
		surface: '#1f2937',
		text: '#f9fafb',
		textMuted: '#9ca3af',
		border: '#374151',
		hover: '#374151'
	}
	// ... weitere Eigenschaften
};

Minimal Theme

const minimalTheme = {
	name: 'Minimal',
	colors: {
		primary: '#000000',
		secondary: '#666666',
		accent: '#000000',
		background: '#ffffff',
		surface: '#ffffff',
		text: '#000000',
		textMuted: '#666666',
		border: '#e0e0e0',
		hover: '#f5f5f5'
	},
	typography: {
		fontFamily: 'Helvetica, Arial, sans-serif'
	},
	borderRadius: {
		sm: '0',
		md: '0',
		lg: '0',
		xl: '0'
	},
	shadows: {
		sm: 'none',
		md: 'none',
		lg: 'none'
	}
};

Theme verwenden

Mit ThemeProvider

<script>
	import ThemeProvider from '$lib/components/cards/ThemeProvider.svelte';
	import BaseCard from '$lib/components/cards/BaseCard.svelte';

	const myTheme = {
		colors: {
			primary: '#ff6b6b'
			// ...
		}
	};
</script>

<ThemeProvider theme={myTheme}>
	<BaseCard {...cardConfig} />
</ThemeProvider>

Direkt an BaseCard

<BaseCard theme={myTheme} variant="default" {modules} />

Theme-Editor

Der Theme-Editor ermöglicht die visuelle Erstellung und Anpassung von Themes.

Features

• Live-Preview: Änderungen sofort sichtbar
• Color-Picker: Farben visuell auswählen
• Typography-Controls: Schriftarten und Größen anpassen
• Export/Import: Themes als JSON ex-/importieren
• Speichern: In Datenbank speichern

Verwendung

<script>
	import ThemeEditor from '$lib/components/theme/ThemeEditor.svelte';
</script>

<ThemeEditor initialTheme={currentTheme} onSave={(theme) => saveTheme(theme)} showPreview={true} />

CSS-Variablen

Themes werden als CSS-Variablen im DOM gesetzt:

:root {
	--theme-primary: #3b82f6;
	--theme-secondary: #8b5cf6;
	--theme-accent: #ec4899;
	--theme-background: #ffffff;
	--theme-surface: #f9fafb;
	--theme-text: #111827;
	--theme-text-muted: #6b7280;
	--theme-border: #e5e7eb;
	--theme-hover: #f3f4f6;
}

In Komponenten verwenden

<style>
	.my-component {
		color: var(--theme-text);
		background: var(--theme-background);
		border: 1px solid var(--theme-border);
	}

	.my-component:hover {
		background: var(--theme-hover);
	}
</style>

Theme Store

Datenbank-Schema

{
  id: string,
  name: string,
  slug: string,
  description: string,
  author: string,
  is_public: boolean,
  is_premium: boolean,
  price: number,
  colors: object,
  typography: object,
  spacing: object,
  borderRadius: object,
  shadows: object,
  animations: object,
  downloads: number,
  rating: number,
  created: datetime,
  updated: datetime
}

Theme-Service Methoden

// Öffentliche Themes laden
const themes = await cardTemplateService.getPublicThemes();

// Spezifisches Theme laden
const theme = await cardTemplateService.getTheme(themeId);

// Neues Theme erstellen
const newTheme = await cardTemplateService.createTheme({
	name: 'My Theme',
	colors: {
		/* ... */
	}
});

// Theme aktualisieren
const updated = await cardTemplateService.updateTheme(themeId, {
	colors: { primary: '#ff0000' }
});

Theme-Kategorien

Business

• Professionell
• Seriös
• Klare Linien
• Gedeckte Farben

Creative

• Bunt
• Verspielt
• Gradients
• Animationen

Minimal

• Reduziert
• Viel Weißraum
• Keine Schatten
• Monochrom

Dark Mode

• Dunkle Hintergründe
• Helle Texte
• Reduzierte Kontraste
• Augenschonend

Eigene Themes erstellen

1. Theme-Objekt definieren

const myCustomTheme = {
	name: 'Ocean Blue',
	colors: {
		primary: '#006994',
		secondary: '#00a8cc',
		accent: '#fafafa',
		background: '#f0f9ff',
		surface: '#e0f2fe',
		text: '#0c4a6e',
		textMuted: '#0284c7',
		border: '#bae6fd',
		hover: '#dbeafe'
	},
	typography: {
		fontFamily: '"Segoe UI", Tahoma, Geneva, Verdana, sans-serif'
	},
	borderRadius: {
		sm: '0.5rem',
		md: '0.75rem',
		lg: '1rem',
		xl: '1.5rem'
	},
	shadows: {
		sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
		md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
		lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)'
	}
};

2. Theme registrieren

// In Datenbank speichern
const saved = await cardTemplateService.createTheme(myCustomTheme);

// Oder lokal verwenden
<ThemeProvider theme={myCustomTheme}>
  <!-- Karten hier -->
</ThemeProvider>

3. Theme testen

• Verschiedene Kartenvarianten
• Alle Module-Typen
• Light/Dark Umgebungen
• Verschiedene Bildschirmgrößen

Best Practices

1. Konsistenz: Verwende ein einheitliches Farbschema
2. Kontrast: Stelle sicher, dass Text gut lesbar ist
3. Hierarchie: Nutze Farben zur visuellen Hierarchie
4. Zugänglichkeit: Beachte WCAG-Richtlinien für Kontraste
5. Performance: Vermeide zu viele CSS-Variablen
6. Responsive: Teste auf verschiedenen Geräten
7. Dokumentation: Dokumentiere Custom-Themes ausführlich

Theme-Migration

Von Tailwind zu Theme

// Tailwind-Klassen
<div class="bg-blue-500 text-white p-4">

// Theme-System
<div style="background: var(--theme-primary); color: var(--theme-text); padding: var(--theme-spacing-md);">

Theme-Versionierung

const theme = {
	name: 'My Theme',
	version: '1.2.0' // Semantic Versioning
	// ...
};