FireCMS gestalten

FireCMS ermöglicht es Ihnen, das Aussehen und Verhalten Ihres Admin-Panels anzupassen. Sie können das Theme, Farben und Typografie entsprechend Ihrer Marke anpassen.

FireCMS verwendet Tailwind CSS für die Gestaltung. FireCMS UI bietet ein Standard-Preset, das erweitert oder vollständig ersetzt werden kann.

Das Theme anpassen

Ihre Standard-tailwind.config.js-Datei sollte so aussehen:

import fireCMSConfig from "@firecms/ui/tailwind.config.js";

export default {
    presets: [fireCMSConfig],
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/@firecms/**/*.{js,ts,jsx,tsx}"
    ]
};

Sie können die Standard-Theme-Konfiguration prüfen in tailwind.config.js im @firecms/ui-Paket.

Farben anpassen

Primärfarbe und Sekundärfarbe

FireCMS UI verwendet eine Primärfarbe und eine Sekundärfarbe. Sie können diese Farben in Ihrer index.css-Datei anpassen:

@import "@firecms/ui/index.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --color-primary: #0070F4;
    --color-secondary: #FF5B79;
}

body {
    @apply w-full min-h-screen bg-surface-50 dark:bg-surface-900 flex flex-col items-center justify-center;
}

Dies sind die Standardwerte, aber Sie können sie ändern, um Ihre Marke widerzuspiegeln.

Farben in der Tailwind-Konfiguration anpassen

Wenn Sie eine komplexere Farbanpassung benötigen, können Sie die tailwind.config.js-Datei ändern, um die Standardfarben von FireCMS zu überschreiben.

FireCMS definiert Farben für alle Oberflächen (standardmäßig hellgrau), Oberflächenakzente (standardmäßig bläulichgrau), Typografiefarben (primär, sekundär und deaktiviert) sowie die Feldfarben (Hintergrund, Hover usw.).

Alle diese Farben können in der tailwind.config.js-Datei überschrieben werden.