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