8d8b649a1f
* Update the minimal theme * Remove unused files * Remove unused default dark theme * Fix type error * Fix the order of themes in the picker interface * Fix account/sign-out not using module foreground color * Fix module bar interface styling * Update system match label * Use half width for default appearance * Fix preview changed based on appearance * Add includeNull option to theme selector interface * Add minimal theme extension docs * Attempt to make typedoc play nice * Remove module bar color override * Add snippet on overrides interface * Deprecate "normal" style v-notice * System filter interface background * Add menu scope * Use colors consistent with interface previews * Remove card-face-color usage * Use consistent hover style in collections & fields * Deprecate card-face-color * Remove old --card vars * Fix revisions divider styling * Remove duplicate background from overview header * Fix permissions overview corner overlap * Make form input height configurable * Allow overriding public form input height * Rename text string * updated data model icon * Standardize form settings between scopes * Allow overriding sidebar forms * Add configurable form gap * Add configurable input-padding * Fix list-item padding * Fix padding in block style * Add links to defaults * Apply color match updates * Default to database icon * Fix schaling of theme selector interface * Fix font loading * Fetch font weights from Google as well * Use display weight in titles * Fix color match display font * Clean up font weights for labels * Update test to remove normal state * Remove typo * Add lowercase dev * Add changeset * Remove font-weight --------- Co-authored-by: Ben Haynes <ben@rngr.org>
2.8 KiB
description, readTime
| description | readTime |
|---|---|
| A guide on how to build custom Themes in Directus. | 2 min read |
Custom Themes
Custom Themes allow you to create a new app design that's tailored to your brand or aesthetic.
Extension Entrypoint
The entrypoint of your theme is the index file inside the src/ folder of your extension package. It exports the
theme configuration and its' rules. When loading your theme, this rule set is imported by the Directus host app.
Example of a theme:
import { defineTheme } from '@directus/extensions-sdk';
export default defineTheme({
name: 'My Custom Theme',
appearance: 'dark',
rules: {
background: 'tomato',
}
});
Available Rules
Rules that are configured in the rules property have to adhere to the rules defined in the theme schema:
https://github.com/directus/directus/blob/main/packages/themes/src/schemas/theme.ts
We recommend using TypeScript for this extension type. The defineTheme function is typed to properly auto-complete all
available rules.
Any rules that are not defined will fallback to the default theme for it's appearance. (dark | light)
Every rule is automatically inserted in the app's root element as a CSS variable which are used across the app's
components. For example, the JSON path navigation.modules.button.foregroundActive will be available as
var(--theme--navigation--modules--button--foreground-active). Note that nested objects are separated by --, and
camelCase values are transformed to hyphen-case (so foregroundActive -> foreground-active).
Because each rule is used as a CSS variable, each rule value should be valid CSS. This also means you can use any CSS
functions in the rules. For example, CSS'
color-mix is a great way to theme palette
alternatives.
Using "Overrides" as a dev tool
The Theme Overrides interface found in Settings > Appearance or on the user detail page uses the same rules available to the theme extensions. For easier extension development, you can use that interface to configure your ideal theme, and then save the output to your theme extension by using the "Copy Raw Value" option.
Google Fonts
The fontFamily rules take any standard CSS font-family value. To load in a font from Google Fonts, simply wrap the
font-name in a set of quotes "". This is still valid CSS, but if the font-name is wrapped in quotes, Directus will
automatically try downloading it through Google Fonts.
For example:
// Use the locally installed font called "Comic Sans MS"
fontFamily: 'Comic Sans MS, sans-serif'
// Use the Google font "Yesteryear"
fontFamily: '"Yesteryear", sans-serif'