自定义主题 Themes & Styling

APP主题

Directus应用程序的开发考虑到了自定义和可扩展性。代码库中引用的颜色和样式都使用CSS变量，因此很容易对应用程序样式进行全面更改。

默认情况下包含两个主题：浅色和深色。您可以复制这些文件以创建自己的主题 - 自定义没有限制。以下是一些关键SCSS文件的代码资源。

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

项目样式

See Adjusting Project Settings

自定义 CSS

您还可以通过项目设置直接覆盖应用程序中的任何核心CSS。这使得编辑上面主题中列出的CSS变量变得容易。

1. 导航到设置模块>项目设置
2. 滚动到自定义CSS字段
3. 输入任何有效的CSS
4. 单击标题栏中的保存操作按钮

示例

由于应用程序样式在渲染组件时插入/删除，因此您需要了解CSS优先级。使用:root或body可能不够具体，您需要定义更具体的范围，例如#app或使用!important。

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