ThemePicker

可视化主题配置组件。

简介

MThemePicker 是一个可视化的主题配置组件，允许用户实时预览并自定义应用主题。统一调整 primary、neutral、圆角、字体、图标集与颜色模式，并支持导出 CSS 变量与 app.config.ts 配置代码。

配置变更会存储在本地，下次访问时自动恢复。组件源码来自 Nuxt UI

MThemePicker 属于主题模块的一部分。若将 movk.theme.enabled 设为 false，该组件将不会被注册。

用法

MThemePicker 通常作为全局主题配置入口，放置在应用头部或工具栏：

当前主题 token 在面板操作后即时更新，便于确认配置是否生效。配合 useTheme 读取响应式状态：

<script setup lang="ts">
const theme = useTheme()
</script>

<template>
  <div class="gap-4 flex">
    <MThemePicker />

    <ClientOnly>
      <div class="grid grid-cols-2 gap-2 text-sm">
        <div>primary: <UBadge :label="theme.primary.value" variant="subtle" /></div>
        <div>neutral: <UBadge :label="theme.neutral.value" variant="outline" /></div>
        <div>radius: {{ theme.radius.value }}rem</div>
        <div>font: {{ theme.font.value }}</div>
        <div>icons: {{ theme.icon.value }}</div>
        <div>mode: {{ theme.mode.value }}</div>
      </div>
      <template #fallback>
        <div class="grid grid-cols-2 gap-2 text-sm text-muted">
          <USkeleton class="h-5" />
          <USkeleton class="h-5" />
          <USkeleton class="h-5" />
          <USkeleton class="h-5" />
          <USkeleton class="h-5" />
          <USkeleton class="h-5" />
        </div>
      </template>
    </ClientOnly>
  </div>
</template>

功能特性

主色调配置

Primary：选择主品牌色，支持黑色或预设颜色
Neutral：配置中性色调，影响文本和背景

样式配置

Radius：调整全局圆角大小（0–5 级别）
Font：选择字体系列（默认字体 Alibaba PuHuiTi）
Icons：切换图标集（Lucide、Phosphor、Tabler）

颜色模式

支持三种颜色模式：

light：浅色模式
dark：深色模式
system：跟随系统

导出配置

配置完成后可导出：

main.css：CSS 变量配置
app.config.ts：应用配置代码

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    themePicker: {
      slots: {
        content: 'w-72 px-6 py-4 flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-5rem)]'
      }
    }
  }
})

Changelog

No recent changes

StarRating

交互式星级评分组件。

WithCharacterLimit

带字符数限制和计数显示的输入框组件。