CSS-Themes

CSS-Themes ändern die Optik, ohne das Verhalten der öffentlichen Seite zu ersetzen. Kein JavaScript läuft; sie passen für Farben, Typografie, Dichte, Rahmen, Zustandsstile und responsive Details.

Minimales Manifest

{
  "schema": "nie-sla-theme-v1",
  "id": "example-theme",
  "name": "Example Theme",
  "version": "1.0.0",
  "type": "theme",
  "mode": "css",
  "author": "Developer",
  "description": "A restrained NIE-SLA theme.",
  "license": "MIT",
  "styles": ["theme.css"],
  "files": ["manifest.json", "theme.css"]
}

schema ist die aktuelle Kompatibilitätskonstante für Theme-Pakete; den Literalwert nie-sla-theme-v1 verwenden.

Feldregeln

Feld	Regel
id	3-49 Kleinbuchstaben, Ziffern oder Bindestriche; muss mit einem Buchstaben beginnen
version	SemVer, z. B. 1.2.0 oder 2.0.0-beta.1
type	immer theme
mode	css; bei Auslassung als CSS behandelt
styles	1-4 gepackte .css-Dateien, in Array-Reihenfolge geladen
files	empfohlen; muss exakt allen Dateien im ZIP entsprechen
preview	optional; zeigt auf ein gepacktes PNG/JPEG/GIF/WebP/SVG
license	optional; SPDX-artige Kennung, z. B. MIT, Apache-2.0
repository / homepage	optional; HTTPS-URL ohne Zugangsdaten, bis 500 Zeichen

name und author sind auf 64 Zeichen begrenzt, description auf 240 und license auf 32. Das System reserviert IDs wie admin, api, classic, extensions, plugins und themes. Unbekannte Felder werden keine Laufzeitfähigkeiten, und benutzerdefinierte Felder können keine Skriptberechtigungen beantragen.

Scoping

Theme-Regeln bleiben in der eigenen ID:

body[data-extension-theme="example-theme"] {
  --bg: #f5f8f7;
  --paper: #ffffff;
  --text: #13201e;
  --muted: #64736f;
  --line: #d7e0dd;
  --green: #087d71;
  --red: #d9503f;
  --yellow: #b7791f;
  --blue: #2563a8;
  --radius: 6px;
  --shadow: 0 10px 28px rgba(17, 39, 35, 0.08);
}

Host-öffentliche Variablen überschreiben statt auf tiefe nth-child-Selektoren, generierte Klassen oder die aktuelle DOM-Tiefe zu setzen. Ein Theme-Update sollte keine Änderung der Produktions-Frontend-Quellen erfordern.

Styles dürfen gepackte Schriften und Bilder referenzieren; entfernte URLs unterliegen der Site-CSP und der Supply-Chain-Policy, daher sollten echte Pakete selbst enthalten sein.

Design und Barrierefreiheit

• Text-/Hintergrundkontrast erreicht WCAG AA.
• Zustand nicht nur über Farbe; Text- oder Formunterschiede behalten.
• Fehler, Fokus, Zustandshinweise und kritische Steuerelemente nicht verstecken.
• Klaren :focus-visible behalten.
• prefers-reduced-motion respektieren.
• Schriften mit lokalen Fallbacks.
• Kein horizontales Overflow bei 320, 375, 768, 1280 und 1440 Pixeln.
• Lange VPS-Namen, Händler, Städte, Leitungen und Labels überdecken keine Nachbarinformationen.

Paketstruktur

manifest.json
theme.css
assets/
  display.woff2
preview.webp

Das Manifest liegt im ZIP-Root; nicht in einen zusätzlichen Projektordner wickeln. Relative CSS-Ressourcenpfade bleiben im Paket und hängen weder von einem CDN noch von einem Dev-Server ab. Laufzeitpakete akzeptieren kein LICENSE/NOTICE ohne Erweiterung und kein Markdown; die vollständige Lizenz bleibt im Quell-Repository und auf der Release-Seite, im ZIP wird das Manifest-Feld license genutzt.

Versionierung

• Farb- oder Layoutfehler: PATCH.
• Zusätzliche kompatible Styles und neue optionale Fähigkeiten: MINOR.
• Geänderte UI-Semantik oder neue Host-Struktur-Anforderungen: MAJOR.

Vor der Aktivierung mindestens Installation, standardmäßig deaktiviert, Aktivierung, Deaktivierung, Upgrade gleicher ID und Löschung testen.

Lokale Prüfung

find dist -type f -print | LC_ALL=C sort
(cd dist && zip -X -r ../release/example-theme-1.0.0.zip .)
shasum -a 256 release/example-theme-1.0.0.zip

Das Hochladen einer neuen Version derselben ID entfernt die alte Revision und hält sie deaktiviert; das ist kein Hot-Swap. Erst auf einem Test-Deployment validieren, dann das SHA-256 von einem Administrator prüfen lassen, bevor aktiviert wird.