深色模式

本页面介绍如何为 GitLab 开发深色模式。有关如何启用深色模式的更多信息，请参阅如何更改 UI 外观。

深色模式的工作原理

当前方法

1. GitLab UI 包含浅色和深色模式的设计令牌（design tokens）CSS 自定义属性，用于颜色和组件。请参阅设计令牌技术实现
2. 语义化设计令牌（Semantic design tokens）为浅色和深色模式提供通用值，例如：背景、文本和边框颜色。

已弃用的方法

1. 使用设计令牌反转调色板（color palette）的 SCSS 变量，为较小规模提供更深的颜色。
2. app/assets/stylesheets/color_modes/_dark.scss 导入深色模式的设计令牌（design tokens）SCSS 变量用于颜色。
3. 在 app/assets/stylesheets/framework/variables_overrides.scss 中覆盖的 Bootstrap 变量在 _dark.scss 中赋予深色模式值。
4. _dark.scss 在 application.scss 之前加载，仅为深色模式用户生成单独的 application_dark.css 样式表。

实用工具类

深色模式的设计令牌（Design tokens）可以通过 Tailwind 类（gl-text-subtle）或 @apply 规则（@apply gl-text-subtle）来应用。

CSS 自定义属性与 SCSS 变量

设计令牌（Design tokens）生成 CSS 自定义属性和 SCSS 变量，这些变量被导入到深色模式样式表中。

• CSS 自定义属性: 优先用于更新颜色模式而无需加载特定颜色模式的样式表，并且是 app/assets/stylesheets/page_bundles 目录中任何颜色的必需项。
• SCSS 变量: 覆盖现有颜色使用以实现深色模式，并编译为特定颜色模式的样式表。

添加 CSS 自定义属性

当设计令牌无法与 Tailwind 实用工具或现有的 CSS 自定义属性一起使用时，创建定制的 CSS 自定义属性。请参阅项目中的手动添加 CSS 自定义属性的指南。

页面包

为了支持深色模式，应在 page_bundle 样式中使用 CSS 自定义属性，因为我们不会为每个 page_bundle 文件生成单独的 *_dark.css 变体。