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