Personalizar el estilo de FireCMS

FireCMS te permite personalizar la apariencia de tu panel de administración. Puedes personalizar el tema, colores y tipografía para que coincida con tu marca.

FireCMS usa tailwindcss para los estilos. FireCMS UI proporciona un preset por defecto que puede ser extendido o completamente reemplazado.

Personalizar el tema

Tu archivo tailwind.config.js por defecto debería verse así:

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

Puede que quieras consultar el archivo tailwind.config.js original en el paquete @firecms/ui.

Puedes extender el tema por defecto añadiendo tus personalizaciones, incluyendo todas las funcionalidades soportadas de tailwindcss.

Personalizar colores

Colores primario y secundario

FireCMS UI usa un color primario y un color secundario. Puedes personalizar estos colores en tu archivo 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;
}

Estos son los valores por defecto pero puedes cambiarlos para que coincida con tu marca.

Al igual que en la sección anterior, siéntete libre de echar un vistazo al archivo index.css original en el paquete @firecms/ui.

Personalizar colores en la configuración de tailwind

Si necesitas una personalización de colores más compleja, puedes modificar el archivo tailwind.config.js, para sobreescribir el color por defecto usado por FireCMS.

FireCMS define colores para todas las superficies (un gris claro por defecto), acentos de superficie (un gris azulado por defecto), colores de tipografía (primary, secondary y disabled) así como los colores de los campos (background, hover, etc).

Todos estos colores pueden ser sobreescritos en el archivo tailwind.config.js. Este es un ejemplo de un archivo de configuración que sobreescribe los colores por defecto:

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

Personalizar tipografía

FireCMS usa la fuente Rubik por defecto, tanto para encabezados como para texto del cuerpo. También usa la fuente JetBrains Mono para bloques de código.

Añadir nuevas fuentes

Si deseas añadir una nueva fuente, puedes instalarla usando npm o yarn.

Por ejemplo, para añadir la fuente Noto Serif:

npm install @fontsource/noto-serif

o

yarn add @fontsource/noto-serif

e importarla en tu archivo App.tsx:

import "@fontsource/noto-serif";

En el preset de tailwind de FireCMS UI, definimos 3 familias de fuentes diferentes: font-headers, font-sans y font-mono.

Puedes sobreescribir estas familias de fuentes en tu archivo tailwind.config.js. Digamos que quieres usar Noto Serif para encabezados y Roboto para el resto del texto:

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

Personalizar estilos de tipografía

Cada estilo de tipografía se define en el index.css, y puede ser personalizado. Estos son los estilos por defecto, pero puedes cambiarlos para que coincida con tu marca. La directiva @apply es una funcionalidad de tailwindcss que te permite aplicar un conjunto de utilidades a una clase.

Siéntete libre de añadir cualquiera de estas clases a tu archivo index.css, para sobreescribir los estilos por defecto:

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

¿Echas en falta alguna personalización?

Si necesitas personalizar cualquier otro aspecto de FireCMS, por favor dínoslo.