---
title: 外观设置
description: 使用可持久化的主题、颜色和紧凑布局偏好完成应用。
order: 22
toc:
  - id: provide-ui-state
    title: 提供 UI 状态
  - id: apply-preferences
    title: 应用偏好
  - id: add-locales
    title: 添加词典
---

## 提供 UI 状态 {#provide-ui-state}

在应用根节点附近挂载 `UiStateProvider`。受控 Provider 可以通过变更处理器持久化每次状态更新。

```tsx
<UiStateProvider>
  <AppearanceController />
  <App />
  <ThemeToggleButton />
</UiStateProvider>
```

## 应用偏好 {#apply-preferences}

渲染一次 `AppearanceController`，使当前状态转换为文档类名和主题变量。`useUiState` 读取或更新单个偏好，`useResolvedTheme` 在解析系统模式后返回最终的亮色或暗色主题。

## 添加词典 {#add-locales}

只有应用使用这些控件时才添加外观词典：

```json
{
  "catalogSources": ["@workspace/blocks/appearance/locales/{locale}"]
}
```

至此应用外壳已经完成。其他功能也只需添加产品实际使用的 Block 词典。