Color Picker
Fügen Sie ein Farbauswahlfeld-Widget für eine editorfreundliche visuelle Konfiguration in EmDash CMS hinzu.
Erweiterung
Color Picker
Fügen Sie ein Farbauswahlfeld-Widget für eine editorfreundliche visuelle Konfiguration in EmDash CMS hinzu.
Color Picker ist ein fokussiertes Editor-Erlebnis-Plugin: Es fügt ein Farbauswahlfeld-Widget hinzu, sodass Administratoren Markenfarben visuell konfigurieren können, anstatt Hexadezimalcodes in einfache Textfelder einzugeben. Es zeigt, dass EmDash-Plugins nicht nur für umfangreiche Integrationen geeignet sind, sondern auch die alltägliche Bearbeitungs-UX verbessern. Siehe packages/plugins/color im EmDash-Repository.
Installation
- Aktivieren Sie das Color Picker-Plugin im EmDash-Administrator.
- Hängen Sie in Ihrem Inhaltsmodell oder Schema das Farb-Widget an die Felder an, in denen Designer Farben auswählen sollen (Themenakzente, Schaltflächenfarben, Kategorieabzeichen).
- Zeigen Sie eine Vorschau der Admin-Benutzeroberfläche an, um zu bestätigen, dass die Auswahl beim Speichern Werte rendert und beibehält.
Konfiguration
Normalerweise definieren Sie Folgendes:
- Standardfarben – markensichere Ausgangspunkte für neue Einträge.
- Zulässige Formate – Hex-, RGB- oder CSS-Variablen, je nachdem, was Ihr Theme verbraucht.
- Hinweise zu Kontrast oder Barrierefreiheit – einige Teams fügen in Feldbeschreibungen Hinweise hinzu, wenn bestimmte Farben den WCAG-Kontrast vor bekannten Hintergründen erfüllen müssen.
Beispiel (konzeptionell): Eine Marketingvorlage könnte primaryColor und secondaryColor als #2563eb und #64748b speichern, auf die in Astro-Komponenten über CSS-Variablen verwiesen wird, die zur Erstellungszeit festgelegt werden.
Nutzungsszenarien
- Themenanpassung – Marketingseiten, bei denen jede Kampagne einen etwas anderen Akzent benötigt, ohne dass neue Bereitstellungen erforderlich sind.
- Designsysteme – Behalten Sie die Palettenauswahl in strukturierten Feldern bei, anstatt in verstreuten Inline-Stilen.
- White-Label-Produkte – Partner wählen Farben innerhalb der von Ihnen definierten Leitplanken aus.
Betriebstipps
- Dokumentieren Sie, wie Farben Frontend-Tokens zugeordnet werden, damit Ingenieure keine Duplikate fest codieren.
- Überprüfen Sie die Werte beim Speichern, wenn Sie Neongrün auf einer Website einer Gesundheitsmarke blockieren müssen.
- Beziehen Sie beim Exportieren von Inhalten Farbfelder in Ihre Migrationscheckliste ein, damit bei erneuten Importen das Design nicht verloren geht.
Registry-Status (geprüft am 2026-10-21): Dieser Eintrag war an diesem Tag nicht in den Ergebnissen der öffentlichen EmDash-Registry enthalten. Die bisherige Seitenadresse bleibt als Referenz erhalten.