Personnaliser le style de FireCMS

FireCMS vous permet de personnaliser l’apparence de votre panneau d’administration. Vous pouvez personnaliser le thème, les couleurs et la typographie pour correspondre à votre marque.

FireCMS utilise Tailwind CSS v4 pour le style. Toute la configuration se fait directement en CSS via le bloc @theme — aucune tailwind.config.js n’est nécessaire pour la plupart des personnalisations.

Configurer votre CSS

Votre fichier index.css devrait ressembler à ceci :

@import 'tailwindcss';
@import "@firecms/ui/index.css" layer(base);
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@plugin "@tailwindcss/typography";

@source "../index.html";
@source "../src/**/*.{js,ts,jsx,tsx}";
@source "../../../node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}";

: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;
}

Points clés :

• @import 'tailwindcss' remplace les anciennes directives @tailwind base/components/utilities.
• @import "@firecms/ui/index.css" layer(base) importe le thème FireCMS UI dans le layer CSS base.
• @custom-variant dark configure la variante dark mode via le sélecteur [data-theme=dark].
• @plugin remplace l’ancien tableau de plugins dans tailwind.config.js.
• @source remplace le tableau content dans tailwind.config.js, indiquant à Tailwind où rechercher les noms de classes.

Vous pouvez consulter le fichier index.css original dans le package @firecms/ui.

Personnaliser les couleurs

Couleurs primaire et secondaire

FireCMS UI utilise une couleur primaire et une couleur secondaire. Vous pouvez les remplacer dans votre index.css en réassignant les propriétés CSS personnalisées après l’import des styles FireCMS UI :

@import 'tailwindcss';
@import "@firecms/ui/index.css" layer(base);
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

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

Ce sont les valeurs par défaut, mais vous pouvez les modifier pour correspondre à votre marque.

Personnalisation avancée des couleurs avec @theme

Dans Tailwind v4, les couleurs et autres tokens de design sont définis directement en CSS via le bloc @theme. FireCMS UI distribue tous ses tokens de cette façon. Si vous avez besoin de remplacer l’intégralité de la palette de couleurs, ajoutez un bloc @theme dans votre index.css :

@import 'tailwindcss';
@import "@firecms/ui/index.css" layer(base);
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@theme {
    --color-primary: #0070F4;
    --color-secondary: #FF5B79;

    /* Couleurs de champ */
    --color-field-disabled: rgb(224 224 226);
    --color-field-disabled-dark: rgb(35 35 37);

    /* Couleurs de texte */
    --color-text-primary: rgba(0, 0, 0, 0.87);
    --color-text-secondary: rgba(0, 0, 0, 0.52);
    --color-text-disabled: rgba(0, 0, 0, 0.38);
    --color-text-primary-dark: #ffffff;
    --color-text-secondary-dark: rgba(255, 255, 255, 0.6);
    --color-text-disabled-dark: rgba(255, 255, 255, 0.48);

    /* Couleurs de surface */
    --color-surface-50: #f8f8fc;
    --color-surface-100: #e7e7eb;
    --color-surface-200: #cfcfd6;
    --color-surface-300: #b7b7bf;
    --color-surface-400: #a0a0a9;
    --color-surface-500: #87878f;
    --color-surface-600: #6b6b74;
    --color-surface-700: #454552;
    --color-surface-800: #292934;
    --color-surface-900: #18181c;
    --color-surface-950: #101013;

    /* Couleurs d'accent de surface */
    --color-surface-accent-50: #f8fafc;
    --color-surface-accent-100: #f1f5f9;
    --color-surface-accent-200: #e2e8f0;
    --color-surface-accent-300: #cbd5e1;
    --color-surface-accent-400: #94a3b8;
    --color-surface-accent-500: #64748b;
    --color-surface-accent-600: #475569;
    --color-surface-accent-700: #334155;
    --color-surface-accent-800: #1e293b;
    --color-surface-accent-900: #0f172a;
    --color-surface-accent-950: #020617;
}

FireCMS définit des couleurs pour toutes les surfaces (un gris clair par défaut), les accents de surface (un gris bleuté par défaut), les couleurs typographiques (primary, secondary et disabled) ainsi que les couleurs des champs (arrière-plan, survol, etc.).

Personnaliser la typographie

FireCMS utilise la police Rubik par défaut, aussi bien pour les titres que pour le corps du texte. La police JetBrains Mono est utilisée pour les blocs de code.

Ajouter de nouvelles polices

Si vous souhaitez ajouter une nouvelle police, vous pouvez l’installer via npm ou yarn.

Par exemple, pour ajouter la police Noto Serif :

npm install @fontsource/noto-serif

ou

yarn add @fontsource/noto-serif

et l’importer dans votre fichier App.tsx :

import "@fontsource/noto-serif";

Dans Tailwind v4, les familles de polices sont définies dans le bloc @theme. FireCMS UI définit 3 familles de polices : --font-sans, --font-headers et --font-mono. Vous pouvez les remplacer directement dans votre index.css :

@import 'tailwindcss';
@import "@firecms/ui/index.css" layer(base);
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@theme {
    --font-sans: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --font-headers: 'Noto Serif', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
}

Personnaliser les styles typographiques

Chaque style typographique est défini dans @firecms/ui/index.css et peut être remplacé. La directive @apply vous permet d’appliquer des utilitaires Tailwind à une classe.

Ajoutez ces classes à votre index.css pour remplacer les valeurs par défaut :

.typography-h1 {
    @apply text-6xl font-headers font-light tracking-tight;
}

.typography-h2 {
    @apply text-5xl font-headers font-light tracking-tight;
}

.typography-h3 {
    @apply text-4xl font-headers font-normal tracking-tight;
}

.typography-h4 {
    @apply text-3xl font-headers font-normal tracking-tight;
}

.typography-h5 {
    @apply text-2xl font-headers font-normal;
}

.typography-h6 {
    @apply text-xl font-headers font-medium;
}

.typography-subtitle1 {
    @apply text-lg font-headers font-medium;
}

.typography-subtitle2 {
    @apply text-base font-headers font-medium;
}

.typography-body1 {
}

.typography-body2 {
    @apply text-sm;
}

.typography-caption {
    @apply text-xs;
}

.typography-label {
    @apply text-sm font-medium;
}

.typography-button {
    @apply text-sm font-semibold uppercase;
}

Vous utilisez encore Tailwind v3 ?

Si votre projet utilise encore Tailwind CSS v3, référez-vous au fichier tailwind.config.js du package @firecms/ui, qui est toujours distribué pour la rétrocompatibilité. Vous pouvez l’utiliser comme preset :

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}"
    ]
};

Une personnalisation vous manque ?

Si vous avez besoin de personnaliser un autre aspect de FireCMS, faites-le nous savoir.