Customizing CSS & SCSS

You can add your own CSS by providing your base Payload config with a path to your own CSS or SCSS. Customize the styling of any part of the Payload dashboard as necessary.

To do so, provide your base Payload config with a path to your own stylesheet. It can be either a CSS or SCSS file.

Example in payload.config.js:

import { buildConfig } from 'payload/config';
import path from 'path';

const config = buildConfig({
    admin: {
        css: path.resolve(__dirname, 'relative/path/to/stylesheet.scss'),
    },
})

You can specify your own SCSS variable stylesheet that will allow for the override of Payload's base theme. This unlocks a ton of powerful theming and design options such as:

• Changing dashboard font families
• Modifying color palette
• Creating a dark theme
• Etc.

To do so, provide your base Payload config with a path to your own SCSS variable sheet.

NOTE: Before you start editing your SCSS file, make sure you install 'sass-loader' & 'node-sass' as dev dependencies. Node

npm install sass-loader node-sass --save-dev

YARN

yarn add sass-loader node-sass --save-dev

Example in payload.config.js:

import { buildConfig } from 'payload/config';
import path from 'path';

const config = buildConfig({
    admin: {
        scss: path.resolve(__dirname, 'relative/path/to/vars.scss'),
    },
})

Example stylesheet override:

$font-body: 'Papyrus';
$style-radius-m: 10px;

To reference all Sass variables that you can override, look at the default SCSS variable stylesheet within the Payload source code.