Theme-MarktplatzErstellungsleitfaden

🎨 Theme-Erstellungsleitfaden

Lerne das ForcedSkin-Theme-JSON-Schema und die Regeln für Palettenfelder — gestalte Paletten für beliebige Websites und reiche sie für die Community ein.

Schnellstart

Modus wählen

Entscheide, ob das Theme im light (helle Paletten) oder dark (dunkle Paletten) läuft.

Farben ausfüllen

Folge der Feldspezifikation unten — mindestens alle erforderlichen Keys müssen in deinem JSON vorhanden sein.

Zur Prüfung einreichen

Auf der Themes -Seite klicke auf „Theme einreichen“. Admins geben frei, bevor es für alle sichtbar wird.

Farbfelder

Alle Paletteneinträge müssen Hex-Strings (#RRGGBB) oder CSS-rgba(...)-Werte sein.

backgroundErforderlich

Primärer Seitenhintergrund — helle Themes tendieren zu fast Weiß, dunkle zu tiefen Neutraltönen. CSS-Var: --color-background

Beispiel: #F8FFF8 / #101410

foregroundErforderlich

Primärer Text — gut lesbar kontrastiert zum Hintergrund. CSS-Var: --color-foreground

Beispiel: #2C3E2C / #E0E0E0

surfaceErforderlich

Karten-/Panel-/Container-Füllung — leicht vom Hintergrund abgehoben. CSS-Var: --color-surface

Beispiel: #F0FFF0 / #1E221E

surfaceMutedOptional

Gedämpfte Hover-/Untercontainer, abgestuft von surface. CSS-Var: --color-surface-muted

Beispiel: #F5FDF5 / #161816

borderErforderlich

Haarlinien & Trennlinien — typischerweise niedrig gesättigte Grautöne/halbtransparente Töne. CSS-Var: --color-border

Beispiel: #D8E8D8 / #333633

mutedErforderlich

Zurückgenommener Text & Platzhalter. CSS-Var: --color-muted

Beispiel: #6C7E6C / #A0A0A0

primaryErforderlich

Primärer Marken-Verlauf für Buttons/Links/Focus — einzelne Farbe oder Verlauf (50–950). Mindestens Shades 500/600/700 erforderlich. Mappt auf CSS-Variablen --color-primary- plus Shade-Tokens (50–950)

Beispiel: { "500": "#4CAF50", "600": "#43A047", "700": "#388E3C" }

secondaryOptional

Sekundäre Akzent-Verläufe für Chips/Ghost-Buttons — Struktur wie primary — mappt auf --color-secondary- plus Shade-Tokens

Beispiel: { "500": "#AAA", ... }

accentOptional

Highlights, Badges, Spotlight-Farben — Struktur wie primary — mappt auf --color-accent- plus Shade-Tokens

Beispiel: { "500": "#FFEB3B", ... }

varsOptional

Beliebige CSS-Custom-Properties — Keys ohne „--“; Werte werden wörtlich auf :root angewendet

Beispiel: { "custom-radius": "8px" }

Farbverläufe

Die JSON-Keys primary, secondary und accent akzeptieren jeweils einen der folgenden Erstellungsstile:

Kompakt (drei Kernfarbtöne)

{
  "primary": {
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C"
  }
}

Die Engine setzt Shade 500 als Standardfarbton; 600/700 decken Hover-/Active-Zustände ab.

Voller Verlauf (50 → 950, elf Stufen)

{
  "primary": {
    "50":  "#E8F5E9",
    "100": "#C8E6C9",
    ...
    "500": "#4CAF50",
    ...
    "950": "#0F3D12"
  }
}

Die Veröffentlichung des vollständigen Verlaufs sorgt überall für sanftere tonale Übergänge.

Tipp: Shade-IDs folgen Tailwind-ähnlichen Verläufen: 50 ist am hellsten, 950 am dunkelsten. Helle Themes nutzen hauptsächlich 500/600/700; dunkle Themes oft 400/500/600.

Vollständige Beispiele

🌿 Helles Beispiel (light-mint)

{
  "background": "#F8FFF8",
  "foreground": "#2C3E2C",
  "surface": "#F0FFF0",
  "surfaceMuted": "#F5FDF5",
  "border": "#D8E8D8",
  "muted": "#6C7E6C",
  "primary": {
    "50": "#E8F5E9",
    "100": "#C8E6C9",
    "200": "#A5D6A7",
    "300": "#81C784",
    "400": "#66BB6A",
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C",
    "800": "#2E7D32",
    "900": "#1B5E20",
    "950": "#0F3D12"
  },
  "secondary": {
    "500": "#AAAAAA",
    "600": "#999999",
    "700": "#777777"
  },
  "accent": {
    "500": "#FFEB3B",
    "600": "#FDD835",
    "700": "#FBC02D"
  }
}

🌑 Dunkles Beispiel (dark-forest)

{
  "background": "#101410",
  "foreground": "#E0E0E0",
  "surface": "#1E221E",
  "surfaceMuted": "#161816",
  "border": "#333633",
  "muted": "#A0A0A0",
  "primary": {
    "500": "#4A9B6B",
    "600": "#3F855C",
    "700": "#346F4D"
  }
}

Benutzerdefinierte Variablen (vars)

Wenn Standard-Tokens nicht ausreichen, füge zusätzliche CSS-Vars unter einem vars -Knoten hinzu — lasse das -- -Präfix in jedem Key weg.

{
  "background": "#101010",
  "foreground": "#E0E0E0",
  ...
  "vars": {
    "radius-card": "16px",
    "shadow-card": "0 2px 12px rgba(0,0,0,0.4)"
  }
}

Slug-Regeln (name)

Nur Kleinbuchstaben (ASCII), Ziffern und Bindestrich ( a-z 0-9 - ).
Bevorzuge prägnante „Modus-Stil“-Paare wie „dark-ocean“ oder „light-sakura“.
Slugs müssen global eindeutig sein — nach der Veröffentlichung nicht mehr änderbar, also vorher sorgfältig prüfen.
Maximale Länge 50 Zeichen.

Einreichung & Prüfung

🔐 Vor dem Einreichen anmelden.

⏳ Einreichungen landen in der Prüfwarteschlange — das Team antwortet in der Regel innerhalb von 1–3 Werktagen.

✅ Freigegebene Themes erscheinen im Marktplatz und können von allen favorisiert werden.

❌ Ungültige Farben, widersprüchliche Namen oder Richtlinienverstöße werden abgelehnt — löschen und eine korrigierte Version einreichen.

🚫 Kein bösartiger Code, Hassinhalte oder offensichtlich rechtsverletzende Paletten.

Bereit? Geh zum Theme-Marktplatz und veröffentliche deine Palette.

🎨 Theme einreichen