youlai-app/README-theme.md

Wot Design Uni 主题系统使用指南

概述

本项目基于 Wot Design Uni 的 CSS 变量系统实现了完整的主题定制功能，支持：

• 🌙 暗黑模式切换
• 🎨 12 种预设主题色
• 🎯 自定义主题色
• 💾 持久化存储
• 📱 多平台兼容（H5、小程序）

核心文件

1. 主题变量文件

• src/styles/wot-theme.scss - Wot Design Uni CSS 变量定制
• src/uni.scss - 引入主题变量文件

2. 主题 Composable

• src/composables/useTheme.ts - 主题状态管理和工具函数

3. 主题设置页面

• src/pages/mine/settings/theme/index.vue - 主题设置界面
• src/pages/test-wot-theme.vue - 主题测试页面

使用方法

1. 在组件中使用主题

<template>
  <view class="container">
    <!-- 暗黑模式切换 -->
    <wd-switch :model-value="theme === 'dark'" @change="toggleTheme" />

    <!-- 使用主题色 -->
    <wd-button type="primary">主要按钮</wd-button>

    <!-- 自定义样式使用 CSS 变量 -->
    <view class="custom-text">使用主题色的文本</view>
  </view>
</template>

<script setup>
import { useTheme } from "@/composables/useTheme";

const { theme, toggleTheme, setThemeColor } = useTheme();

// 切换到指定主题色
const changeColor = () => {
  setThemeColor("#ff6b6b");
};
</script>

<style scoped>
.container {
  background-color: var(--wot-color-bg, #fff);
  color: var(--wot-color-text, #333);
}

.custom-text {
  color: var(--wot-color-theme, #165dff);
}
</style>

2. 可用的 CSS 变量

主题色系

• --wot-color-theme - 主题色
• --wot-color-success - 成功色
• --wot-color-warning - 警告色
• --wot-color-danger - 危险色
• --wot-color-info - 信息色

文本颜色

• --wot-color-text - 主要文本色
• --wot-color-text-secondary - 次要文本色
• --wot-color-text-placeholder - 占位符文本色

背景颜色

• --wot-color-bg - 主背景色
• --wot-color-bg-light - 浅背景色
• --wot-card-bg-color - 卡片背景色

边框颜色

• --wot-color-border - 边框色
• --wot-color-border-light - 浅边框色

3. 预设主题色

项目提供 12 种预设主题色：

const colorColumns = [
  { value: "#165DFF", label: "蓝色" },
  { value: "#0FC6C2", label: "青绿色" },
  { value: "#722ED1", label: "紫色" },
  { value: "#F5222D", label: "红色" },
  { value: "#FA8C16", label: "橙色" },
  { value: "#FADB14", label: "黄色" },
  { value: "#52C41A", label: "绿色" },
  { value: "#EB2F96", label: "粉色" },
  { value: "#13C2C2", label: "青色" },
  { value: "#1890FF", label: "天蓝色" },
  { value: "#CD5C5C", label: "经典红" },
  { value: "#228B22", label: "自然绿" },
];

暗黑模式适配

自动适配

所有使用 Wot CSS 变量的组件都会自动适配暗黑模式。

手动适配

对于自定义组件，使用 CSS 变量即可：

.my-component {
  background-color: var(--wot-card-bg-color, #fff);
  color: var(--wot-color-text, #333);
  border: 1px solid var(--wot-color-border, #e5e6eb);
}

测试页面

访问 /pages/test-wot-theme 可以测试：

• 暗黑模式切换
• 主题色切换
• CSS 变量效果
• 各种 Wot 组件的主题适配

注意事项

1. CSS 变量优先级：使用 var(--variable-name, fallback) 格式提供回退值
2. 暗黑模式检测：通过 [data-theme="dark"] 选择器自动切换
3. 持久化存储：主题设置会自动保存到本地存储
4. 平台兼容：H5 和小程序环境都有相应的适配处理

扩展主题

添加新的主题色

1. 在 colorColumns 数组中添加新颜色
2. 在 wot-theme.scss 中添加对应的 CSS 类

.theme-custom {
  --wot-color-theme: #your-color;
}

自定义 CSS 变量

在 wot-theme.scss 中添加新的变量：

:root {
  --wot-custom-color: #your-color;
}

[data-theme="dark"] {
  --wot-custom-color: #your-dark-color;
}

故障排除

1. 主题色不生效：检查是否正确引入了 wot-theme.scss
2. 暗黑模式样式异常：确认使用了正确的 CSS 变量
3. 小程序兼容问题：检查条件编译是否正确

更新日志

• ✅ 修复了暗黑模式切换无效的问题
• ✅ 完善了 Wot Design Uni CSS 变量系统
• ✅ 优化了主题设置页面的 UI 组件
• ✅ 添加了完整的主题测试页面