GUIDE

主题与配置

使用 CwaProvider 配置主题、材质、密度和动效，用公开 CSS Token 定制品牌。

Provider 先表达偏好

主题、材质、密度和动效是独立配置。system 跟随操作系统；material="solid" 明确请求实色降级。

<CwaProvider
  theme="system"
  material="auto"
  motion="system"
  density="comfortable"
  locale="zh-CN"
>
  <App />
</CwaProvider>

配置	有效值	默认
theme	light / dark / system	system
material	auto / solid	auto
motion	system / reduced / full	system
density	comfortable / compact	comfortable
locale	语言标识字符串	zh-CN

具体组件的语义、键盘行为和数值文字仍由组件 API 与业务共同负责。

用公开 Token 定制

组件库通过 CSS 自定义属性暴露设计变量。把覆盖限定在应用主题类中，不改组件私有选择器。

.my-cwa-theme {
  --cwa-design-color-accent: #4c55d4;
  --cwa-design-color-on-accent: #ffffff;
  --cwa-design-radius-control: 0.875rem;
  --cwa-design-radius-panel: 1.5rem;
}
/* <CwaProvider className="my-cwa-theme"> */

在主题实验室生成配置 →

主题与 Portal

Provider 的主题属性会随浮层作用域传递。自定义 Portal 容器可用 portalContainer；品牌 Token 覆盖需要在实际 Portal 位置保持可继承作用域。

网站主题覆盖 html、body、Shell 与示例。组件详情允许单独切换示例的浅深主题，不改变正文阅读模式。

尊重系统偏好

减少动态、减少透明、高对比度与 forced colors 需要在最终应用里保留。不要删除可见焦点或强制所有场景使用 Clear 玻璃。

阅读无障碍指南 →