Personalizzare lo stile di FireCMS

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

FireCMS usa tailwindcss per lo styling. FireCMS UI fornisce un preset predefinito che può essere esteso o completamente sostituito.

Personalizzare il tema

Il tuo file tailwind.config.js predefinito dovrebbe essere simile a questo:

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

Puoi estendere il tema predefinito aggiungendo le tue personalizzazioni, incluse tutte le funzionalità tailwindcss supportate.

Personalizzare i colori

Colori primari e secondari

FireCMS UI usa un colore primario e un colore secondario. Puoi personalizzare questi colori nel tuo file index.css:

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

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

Personalizzare i colori nella config tailwind

Se hai bisogno di una personalizzazione dei colori più complessa, puoi modificare il file tailwind.config.js per sovrascrivere i colori predefiniti usati da FireCMS.

FireCMS definisce colori per tutte le superfici (grigio chiaro per impostazione predefinita), accenti superficie (grigio bluastro per impostazione predefinita), colori tipografia (primario, secondario e disabilitato) oltre ai colori dei campi (sfondo, hover, ecc.).

Tutti questi colori possono essere sovrascritti nel file tailwind.config.js:

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}"
    ],
    theme: {
        extend: {
            colors: {
                "primary": "var(--color-primary)",
                "secondary": "var(--color-secondary)",
                "field": {
                    "disabled": "rgb(224 224 226)",
                    "disabled-dark": "rgb(35 35 37)"
                },
                "text": {
                    "primary": "rgba(0, 0, 0, 0.87)",
                    "secondary": "rgba(0, 0, 0, 0.55)",
                    "disabled": "rgba(0, 0, 0, 0.38)",
                    "primary-dark": "#ffffff",
                    "secondary-dark": "rgba(255, 255, 255, 0.60)",
                    "disabled-dark": "rgba(255, 255, 255, 0.48)"
                },
                "surface": {
                    "50": "#f8f8fc",
                    "100": "#E7E7EB",
                    "200": "#CFCFD6",
                    "300": "#B7B7BF",
                    "400": "#A0A0A9",
                    "500": "#87878F",
                    "600": "#6B6B74",
                    "700": "#454552",
                    "800": "#292934",
                    "900": "#18181C",
                    "950": "#101013"
                },
                "surface-accent": {
                    "50": "#f8fafc",
                    "100": "#f1f5f9",
                    "200": "#e2e8f0",
                    "300": "#cbd5e1",
                    "400": "#94a3b8",
                    "500": "#64748b",
                    "600": "#475569",
                    "700": "#334155",
                    "800": "#1e293b",
                    "900": "#0f172a",
                    "950": "#020617"
                }
            }
        }
    }
};

Personalizzare la tipografia

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

Aggiungere nuovi font

Se vuoi aggiungere un nuovo font, puoi installarlo usando npm o yarn:

npm install @fontsource/noto-serif

o

yarn add @fontsource/noto-serif

e importarlo nel tuo file App.tsx:

import "@fontsource/noto-serif";

Nel preset tailwind FireCMS UI, definiamo 3 diverse famiglie di font: font-headers, font-sans e font-mono.

Puoi sovrascrivere queste famiglie di font nel tuo file tailwind.config.js:

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}"
    ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Roboto", "Helvetica", "Arial", "sans-serif"],
        headers: ["Noto Serif", "Roboto", "Helvetica", "Arial", "sans-serif"],
        mono: ["JetBrains Mono", "Space Mono", "Lucida Console", "monospace"]
      }
    }
  }
};

Personalizzare gli stili di tipografia

Puoi aggiungere queste classi al tuo file index.css per sovrascrivere gli stili predefiniti:

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

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

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

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

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

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

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

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

Manca qualche personalizzazione?

Se hai bisogno di personalizzare qualsiasi altro aspetto di FireCMS, faccelo sapere.