> For the complete documentation index, see [llms.txt](https://summerain-1.gitbook.io/summerain/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://summerain-1.gitbook.io/summerain/zh-cn/yi-gui-dang-she-ji-ji-lu/frontend-architecture/04-theme-and-ui.md).

# 04 - 主题与界面

> \[!WARNING] **已归档的设计记录。** 本页面早于已经完成的 V2 前端， 其中的版本、路径或实现状态可能已经过时。

> 所属：[前端架构设计（索引）](/summerain/zh-cn/yi-gui-dang-she-ji-ji-lu/frontend-architecture.md)

## shadcn 预设策略

* 初始化后执行 `npx shadcn@latest apply --preset b3RZAU6YV` 拉取该预设。
* **预设仅用于决定组件构成与默认结构**（组件集、圆角、变体骨架等）。
* **忽略预设的颜色、字体与图标：**
  * 颜色 -> 由我们的**咖啡色板**覆盖（写入 `src/styles.css` 的 `@theme` 与 `:root`/`.dark` CSS 变量；Tailwind v4 采用 CSS-first，无 `tailwind.config.js`）。
  * 字体 -> 沿用系统字体栈，不采用预设字体（Geist）。
  * 图标 -> 采用 **Tabler Icons**，不采用预设图标库（Phosphor）；将 `components.json` 的 `iconLibrary` 设为 `tabler`。

## 咖啡色板（Tailwind v4 `@theme` 接线）

> [**design-system/MASTER.md**](/summerain/zh-cn/yi-gui-dang-she-ji-ji-lu/frontend-architecture/master.md) **§2 是单一事实来源**（包含完整令牌表与对比度）。下方为摘要；色值在原型迭代中**进一步加深以提高对比度**（卡片上的辅助文字为 6.24:1，正文为 11.98:1），并**取代**早期的 `css/style.css`（遗留原生前端将由 `frontend/` 替换，不再作为色值来源）。

Tailwind v4 采用 CSS-first：色板写入 `src/styles.css` 中的 `@theme { --color-*: ...; }` 与 `:root`/`.dark` 变量。组件直接使用 `bg-primary`、`text-foreground` 等令牌类。项目中不存在 `tailwind.config.js`。

浅色主题（摩卡），`:root`：

* 背景 `#F1E7DA` / 卡片 `#FFFCF8` / 文字 `#33261B` / 辅助文字 `#6E5C49` / 边框 `#DAC7AE`
* 主色 `#6F4E37`（悬停 `#573D2B`，浅色背景 `#EFE2D2`）/ 辅色 `#A9764F`

深色主题（浓缩），`.dark`：

* 背景 `#16100D` / 卡片 `#251B14` / 文字 `#F2E7D6` / 辅助文字 `#C5B59E` / 边框 `#4D3A29`
* 主色 `#D4A57E`（悬停 `#B9895F`）/ 辅色 `#C39A72`

柔化后的状态色详见 MASTER §2。

所有状态色均经过柔化；绿、蓝、红、紫分别对应成功、警告、危险、信息。

## 字体与国际化

* **字体：** 使用系统字体栈 `-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, ...`。不引入任何外部 Web 字体（满足 [07 生产规范 · 外部资源本地化](/summerain/zh-cn/yi-gui-dang-she-ji-ji-lu/frontend-architecture/07-production-standards.md#local-external-resources)）。
* **国际化：** 英语为主要语言，默认语言为 `en-US`，同时提供 `zh-CN` 和 `ja-JP`。所有 UI 字符串按语言存放在 `src/i18n/locales/`，组件必须通过 `t('key')` 获取，不得硬编码面向用户的文案。

> 本要求取代早期“暂不引入国际化”的 YAGNI 决策（参见 [09 决策记录](/summerain/zh-cn/yi-gui-dang-she-ji-ji-lu/frontend-architecture/09-decisions-and-scope.md#decision-record)）。

***

<- [03 特性](/summerain/zh-cn/yi-gui-dang-she-ji-ji-lu/frontend-architecture/03-features.md) · [索引](/summerain/zh-cn/yi-gui-dang-she-ji-ji-lu/frontend-architecture.md) · 下一章节：[05 构建与部署](/summerain/zh-cn/yi-gui-dang-she-ji-ji-lu/frontend-architecture/05-build-and-deploy.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://summerain-1.gitbook.io/summerain/zh-cn/yi-gui-dang-she-ji-ji-lu/frontend-architecture/04-theme-and-ui.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.