Styling FireCMS

FireCMS allows you to customize the look and feel of your admin panel. You can customize the theme, colors, and typography to match your brand.

FireCMS uses tailwindcss for styling. FireCMS UI provides a default preset that can be extended or completely replaced.

Customizing the theme

Your default tailwind.config.js file should look like this:

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

You may want to check the original tailwind.config.js file in the @firecms/ui package.

You can extend the default theme by adding your customizations, including all supported tailwindcss features.

Customizing colors

Primary and secondary colors

FireCMS UI uses a primary color and a secondary color. You can customize these colors in your index.css file:

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

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

:root {
    --fcms-primary: #0070F4;
    --fcms-primary-dark: #0061e6;
    --fcms-primary-bg: #0061e610;
    --fcms-secondary: #FF5B79;
}

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

These are the default values but you can change them to match your brand. The --fcms-primary-dark is used for some effects like hovering buttons. The --fcms-primary-bg variable is used when hovering over primary elements, like cards ( it is usually mostly transparent)

Just like in the previous section, feel free to take a look at the original index.css file in the @firecms/ui package.

Customizing colors in the tailwind config

If you need a more complex color customization, you can modify the tailwind.config.js file, to override the default color used by FireCMS.

FireCMS defines colors for all the surfaces (a light gray by default), surfaces accents (a bluish gray by default), typography colors (primary, secondary and disabled) as well as the field colors (background, hover, etc).

All these colors can be overridden in the tailwind.config.js file. This is an example of a config file that overrides the default colors:

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(--fcms-primary)",
                "primary-dark": "var(--fcms-primary-dark)",
                "primary-bg": "var(--fcms-primary-bg)",
                "secondary": "var(--fcms-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"
                }
            }
        }
    }
};

Customizing typography

FireCMS uses the Rubik font by default, both for headings and body text. It also uses the JetBrains Mono font for code blocks.

Adding new fonts

If you would like to add a new font, you can install it using npm or yarn.

For example, to add the Noto Serif font:

yarn add @fontsource/noto-serif

and import it in your App.tsx file:

import "@fontsource/noto-serif";

In the FireCMS UI tailwind preset, we define 3 different font families: font-headers, font-sans and font-mono.

You can override these font families in your tailwind.config.js file. Let's say you want to use Noto Serif for headers and Roboto for the rest of the text:

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

Customizing typography styles

Each typography style is defined in the index.css, and can be customized. These are the default styles, but you can change them to match your brand. The @apply directive is a tailwindcss feature that allows you to apply a set of utilities to a class.

Feel free to add any of this classes to your index.css file, to override the default styles:

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

Do you miss any customization?

If you need to customize any other aspect of FireCMS, please let us know.