主题色使用指南

本项目采用 UnoCSS + Wot Design Uni 的双重主题机制，实现了统一的色彩管理。

1. 核心机制

• 定义源头: src/App.ku.vue 中定义的 themeVars。
• 注入方式: 通过 wd-config-provider 组件将 JS 变量注入为 CSS 变量。
• 使用方式:
  • UnoCSS: 使用 primary、secondary 等预设颜色。
  • CSS/SCSS: 使用 CSS 变量 var(--theme-color-primary)。
  • 组件库: Wot Design 组件会自动适配。

2. 修改主题色

如需修改全站主题色，请编辑 src/App.ku.vue 文件：

// src/App.ku.vue
const themeVars = ref({
  colorTheme: '#FF2237',          // 品牌主色 (红色)
  colorThemePrimary: '#FF2237',   // 主色 (同上)
  colorThemeSecondary: '#FF6B7A', // 辅色 (浅红)
  colorThemeBackground: '#FFF0F0',// 背景底色 (极浅红)
})

修改后，页面中所有使用 primary 颜色的地方都会自动更新。

注意: Tabbar 的选中颜色需要在 pages.config.ts 中单独修改 selectedColor，以保持一致。

3. 如何使用主题色

3.1 使用 UnoCSS 类名 (推荐)

在模板中直接使用 UnoCSS 的颜色工具类。

<!-- 文字颜色 -->
<view class="text-primary">主色文字</view>
<view class="text-secondary">辅色文字</view>

<!-- 背景颜色 -->
<view class="bg-primary text-white">主色背景</view>
<view class="bg-theme-bg">主题底色背景</view>

<!-- 边框颜色 -->
<view class="border border-primary">主色边框</view>

3.2 在 CSS/SCSS 中使用

使用 CSS 变量来引用主题色。

.custom-box {
  // 推荐使用 UnoCSS 定义的变量名 (兼容性更好)
  background-color: var(--theme-color-primary);
  color: var(--theme-color-secondary);
}

3.3 在 Wot Design 组件中使用

大多数 wd- 开头的组件会自动继承主题色。如果需要手动指定，通常不需要传值，或者传入 primary 类型。

<wd-button type="primary">主色按钮</wd-button>

4. 颜色变量映射表

变量名 (UnoCSS)	对应 CSS 变量	说明
primary	--theme-color-primary / --wot-color-theme-primary	核心主色
secondary	--theme-color-secondary / --wot-color-theme-secondary	辅助色
theme-bg	--theme-color-background / --wot-color-theme-background	浅色背景

5. 其他配置

• 导航栏/Tabbar 颜色:
  • 配置文件: pages.config.ts (引用 src/theme.json 中的变量)
  • 如果修改了主色，记得同步更新 pages.config.ts 中的 selectedColor。