安装 CodeBuddy Code CLI 扩展

确保已安装最新版本的 CodeBuddy Code CLI。通过以下命令全局安装或更新：

npm install -g codebuddy-code-cli

初始化 Vue 待办应用项目

在项目根目录运行以下命令，生成主题配置模板：

codebuddy theme init

该命令会在项目中创建 theme/ 目录，包含默认主题变量和样式覆盖文件。

定义主题变量

在 theme/variables.scss 中定义颜色变量：

$primary: #4a6fa5;
$secondary: #166088;
$accent: #4fc3f7;
$error: #ff5252;
$background: #f5f7fa;

集成主题到 Vue 组件

修改 main.js 或入口文件，导入主题样式：

import '@/theme/main.scss'

在组件中使用 CSS 变量绑定动态主题：

<template>
  <div class="todo-app" :style="themeStyle">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  computed: {
    themeStyle() {
      return {
        '--primary': this.$theme.colors.primary,
        '--background': this.$theme.colors.background
      }
    }
  }
}
</script>

实现主题切换功能

创建主题切换组件 ThemeSwitcher.vue：

<template>
  <select v-model="selectedTheme" @change="changeTheme">
    <option v-for="theme in themes" :value="theme.key">
      {{ theme.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedTheme: 'light',
      themes: [
        { key: 'light', name: 'Light Theme' },
        { key: 'dark', name: 'Dark Theme' }
      ]
    }
  },
  methods: {
    changeTheme() {
      this.$emit('theme-changed', this.selectedTheme)
    }
  }
}
</script>

动态加载主题配置

在父组件中处理主题切换事件：

methods: {
  handleThemeChange(themeKey) {
    import(`@/theme/${themeKey}.scss`).then(module => {
      this.$theme.apply(module.default)
    })
  }
}

构建主题化样式

在 theme/main.scss 中建立响应式主题结构：

@import 'variables';

[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #2c3e50;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

.todo-item {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

通过 CodeBuddy 生成主题模板

使用 CLI 快速生成新主题骨架：

codebuddy theme create --name=corporate

该命令会生成包含基础颜色配置的 theme/corporate.scss 文件。

测试主题切换效果

运行开发服务器验证主题切换功能：

npm run serve

在浏览器中测试不同主题下的 UI 渲染效果，确保颜色变量正确应用到所有组件。