Personalizzare lo stile di FireCMS

FireCMS ti permette di personalizzare l’aspetto del tuo pannello di amministrazione. Puoi personalizzare il tema, i colori e la tipografia per adattarli al tuo brand.

FireCMS utilizza Tailwind CSS v4 per lo styling. Tutta la configurazione si effettua direttamente in CSS usando il blocco @theme — nessun tailwind.config.js è necessario per la maggior parte delle personalizzazioni.

Configurare il CSS

Il tuo file index.css dovrebbe apparire così:

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

Punti chiave:

• @import 'tailwindcss' sostituisce le vecchie direttive @tailwind base/components/utilities.
• @import "@firecms/ui/index.css" layer(base) importa il tema FireCMS UI nel layer CSS base.
• @custom-variant dark configura la variante dark mode usando il selettore [data-theme=dark].
• @plugin sostituisce il vecchio array di plugin in tailwind.config.js.
• @source sostituisce l’array content in tailwind.config.js, indicando a Tailwind dove cercare i nomi delle classi.

Puoi consultare il file index.css originale nel pacchetto @firecms/ui.

Personalizzare i colori

Colori primario e secondario

FireCMS UI usa un colore primario e un colore secondario. Puoi sovrascriverli nel tuo index.css riassegnando le proprietà CSS personalizzate dopo l’importazione degli stili di 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;
}

Questi sono i valori predefiniti, ma puoi cambiarli per adattarli al tuo brand.

Personalizzazione avanzata dei colori con @theme

In Tailwind v4, i colori e gli altri token di design sono definiti direttamente in CSS tramite il blocco @theme. FireCMS UI distribuisce tutti i suoi token in questo modo. Se vuoi sovrascrivere l’intera palette di colori, aggiungi un blocco @theme nel tuo 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;

    /* Colori dei campi */
    --color-field-disabled: rgb(224 224 226);
    --color-field-disabled-dark: rgb(35 35 37);

    /* Colori del testo */
    --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);

    /* Colori delle superfici */
    --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;

    /* Colori degli accenti di superficie */
    --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 definisce colori per tutte le superfici (un grigio chiaro per impostazione predefinita), accenti di superficie (un grigio bluastro per impostazione predefinita), colori tipografici (primary, secondary e disabled) oltre ai colori dei campi (sfondo, hover, ecc.).

Personalizzare la tipografia

FireCMS usa il font Rubik per impostazione predefinita, sia per i titoli che per il corpo del testo. Il font JetBrains Mono viene utilizzato per i blocchi di codice.

Aggiungere nuovi font

Se vuoi aggiungere un nuovo font, puoi installarlo con npm o yarn.

Ad esempio, per aggiungere il font Noto Serif:

npm install @fontsource/noto-serif

oppure

yarn add @fontsource/noto-serif

e importarlo nel tuo file App.tsx:

import "@fontsource/noto-serif";

In Tailwind v4, le famiglie di font sono definite nel blocco @theme. FireCMS UI definisce 3 famiglie di font: --font-sans, --font-headers e --font-mono. Puoi sovrascriverle direttamente nel tuo 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;
}

Personalizzare gli stili tipografici

Ogni stile tipografico è definito in @firecms/ui/index.css e può essere sovrascritto. La direttiva @apply permette di applicare utility di Tailwind a una classe.

Aggiungi queste classi al tuo index.css per sovrascrivere i valori predefiniti:

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

Usi ancora Tailwind v3?

Se il tuo progetto usa ancora Tailwind CSS v3, fai riferimento al file tailwind.config.js del pacchetto @firecms/ui, distribuito ancora per compatibilità con le versioni precedenti. Puoi usarlo come 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}"
    ]
};

Manca qualche personalizzazione?

Se vuoi personalizzare qualsiasi altro aspetto di FireCMS, faccelo sapere.