Themes & Styling ​

Form Follows Function is the guiding design principle of Directus. The minimal UI allows the platform to be easily tailored to your brand. Learn more about the App.

App Themes ​

The Directus App has been developed with customization and extensibility in mind. Colors and styles referenced within the codebase all use CSS variables, and therefore it is easy to make comprehensive changes to the App styling.

There are two themes included by default: Light and Dark. You can duplicate these files to create your own themes — with no limit to customization. Below are several code resources for key SCSS files.

• Themes — See the Light Theme or Dark Theme
• Typography — See the Fonts and Type Styles
• Variables — See the Global Variables

Project Styling ​

See Adjusting Project Settings

Custom CSS ​

You can also override any core CSS directly within the App through Project Settings. This makes it easy to edit the CSS variables listed in the themes above.

1. Navigate to Settings Module > Project Settings
2. Scroll to the Custom CSS field
3. Enter any valid CSS
4. Click the Save action button in the header

Example ​

Since App styles are inserted/removed whenever a component is rendered, you'll need to be aware of CSS priority. Using :root or body likely isn't scoped enough, you'll need to define a more specific scope, such as #app, or use !important.

body {
	--family-sans-serif: 'Comic Sans MS';
	--primary: MediumSlateBlue !important;
}

body {
	--family-sans-serif: 'Comic Sans MS';
	--primary: MediumSlateBlue !important;
}