---
title: "ThemePicker"
description: "可视化主题配置组件。"
seo_title: "ThemePicker"
seo_description: "A visual theme configuration component to switch colors, radius, icon set and dark mode, with CSS/config export."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/components/theme-picker"
---
# ThemePicker

> 可视化主题配置组件。

## 简介

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

> \[\!NOTE\]
> See: https://github.com/nuxt/ui/tree/v4/docs/app/components/theme-picker
> 
> 配置变更会存储在本地，下次访问时自动恢复。组件源码来自 Nuxt UI

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

## 用法

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

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

```vue [ComponentsThemePickerStateExample.vue]
<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>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" />
        </div>
      </template>
    </ClientOnly>
  </div>
</template>
```

## 功能特性

### 主色调配置

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

### 样式配置

- **Radius**：调整全局圆角大小（0–5 级别）
- **Icons**：切换图标集（Lucide、Phosphor、Tabler）

### 颜色模式

支持三种颜色模式：

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

### 导出配置

配置完成后可导出：

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

## Theme

<component-theme></component-theme>## Changelog

See commit history for [src/runtime/components/theme-picker/ThemePicker.vue](https://github.com/mhaibaraai/movk-nuxt/commits/main/src/runtime/components/theme-picker/ThemePicker.vue).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.