主题系统

介绍

Movk Nuxt 在 Nuxt UI 主题之上提供统一的运行时主题管理：颜色、圆角、字体、图标集与深色模式集中由一处控制，并可在运行时交互式调整、一键导出 CSS 变量或配置代码。

主题能力由三部分组成：

• 模块默认值 ： 在 nuxt.config.ts 的 movk.theme 中声明可选项。
• ThemePicker 组件 ： 面向用户的可视化调参面板，支持导出。
• useTheme composable ： 在脚本中读写主题状态、导出 CSS/配置。

启用与关闭

主题模块默认启用。关闭后不再注入 appConfig 默认值、theme 插件与 ThemePicker 组件：

export default defineNuxtConfig({
  movk: {
    theme: { enabled: false }
  }
})

ThemePicker 组件

ThemePicker 提供颜色、圆角、字体、图标集、深色模式的可视化切换，并能导出当前主题。

useTheme

useTheme 暴露主题的响应式状态与导出方法，适合自定义主题面板或在业务逻辑中读取主题：

const {
  color, neutral, radius, font, icon, mode,
  exportCSS, exportConfig, resetTheme
} = useTheme()

// 读取/切换主题
color.value = 'green'
mode.value = 'dark'

// 导出当前主题
const css = exportCSS()
const config = exportConfig()

可选项定制

颜色别名、圆角档位、字体列表、neutral 颜色均可在 movk.theme 中覆盖，作为 ThemePicker 与 useTheme 的取值范围：

export default defineNuxtConfig({
  movk: {
    theme: {
      colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
      radiuses: [0, 0.125, 0.25, 0.375, 0.5],
      fonts: [
        { name: 'Alibaba PuHuiTi', href: 'https://cdn.mhaibaraai.cn/fonts/alibaba-puhuiti.css' }
      ]
    }
  }
})

导出与复用

ThemePicker 与 useTheme.exportCSS() 导出的 CSS 变量可直接写入项目的 main.css，将运行时调试结果固化为默认主题：

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  /* 粘贴 exportCSS() 导出的变量 */
}