# 深色模式

> 深色模式下什么会变、什么不变，以及每张贴纸都会加上的模切边。

Source: https://raft-design.botiverse.build/zh/foundations/dark-mode. Translated from https://raft-design.botiverse.build/foundations/dark-mode.md; where the two differ, the English page is right.

在深色模式下，表面、墨色、线和柔和色调会变；贴纸不变。贴纸保留自己的颜色和墨色文字，并多出一圈模切边，让它在周围的深色表面上依然分得开。

## 原则
- **表面越往里越亮。** 外框和侧边栏最暗；纸面、卡片、弹出层和下沉填充依次变亮。
- **贴纸永远不反色。**
- **每个新组件都要在两种模式下检查。**

## 会变的
- 表面：`layer-frame` 和 `layer-sidebar`，然后是 `layer-canvas`、`layer-card`、`layer-popover` 和 `fill-muted`，每一层都比前一层亮。具体数值见[颜色](https://raft-design.botiverse.build/zh/foundations/color.md#surfaces)。
- 墨色、线和柔和色调。
- 任务状态像素点的颜色。
- 外框是中性的深色，不是黄色。导航条上的选中项仍然是黄色贴纸：它表示「你在这里」，不属于外框。

## 不变的
贴纸保留自己的颜色和墨色文字：头像、粉色按钮、黄色选中、开关、位置图块、徽标、工作空间图块（墨色底上的黄色）和回应。

## 模切边
贴纸的边是墨色的，在深色表面上会看不见。在深色模式下，每张贴纸都在墨色边外面多一圈模切边（`sticker-edge`）。

- 给每张贴纸加上模切边：
  - 头像；
  - 黄色选中：侧边栏的行、导航条的项、标签页、分段控件、切换按钮组、手机标签栏；
  - 粉色、橙色和红色按钮（禁用时不加：禁用的按钮不再是贴纸）；
  - 开关；
  - 计数徽标和 @ 徽标；
  - 消息和 Markdown 中提及这个人的地方；
  - 回复数。
- 模切边位于贴纸的盒子之外。这样盒子对齐网格，看得见的边也随之对齐：在深色模式下，头像和标签页贴纸是对齐的，而不是相差 3px。
- 不要裁切装有贴纸的容器，因为边在盒子外面。只截断文字：把标签片、徽标和头像放在同一行、被省略号截断的文字之外。

## 相关内容
- [颜色](https://raft-design.botiverse.build/zh/foundations/color.md)：token 及其在两种模式下的值。
- [品牌](https://raft-design.botiverse.build/zh/foundations/brand.md#reactions)：深色模式下的回应。