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({serverURL: 'http://localhost:3000',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.
Example in payload.config.js:
import { buildConfig } from 'payload/config';import path from 'path';const config = buildConfig({serverURL: 'http://localhost:3000',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.