---
title: "ThemePicker"
description: "A visual theme configuration component."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/components/theme-picker"
---
# ThemePicker

> A visual theme configuration component.

## Introduction

`MThemePicker` is a visual theme configuration component that allows users to preview and customize the application theme in real time. It unifies adjustments to `primary`, `neutral`, border-radius, icon sets, and color mode, with support for exporting CSS variables and `app.config.ts` configuration code.

> [!NOTE]
> See: https://github.com/nuxt/ui/tree/v4/docs/app/components/theme-picker
> 
> Configuration changes are stored locally and automatically restored on the next visit. The component source originates from Nuxt UI.

> [!NOTE]
> 
> MThemePicker
> 
>  is part of the theme module. If 
> 
> movk.theme.enabled
> 
>  is set to 
> 
> false
> 
> , this component will not be registered.

## Usage

`MThemePicker` is typically used as a global theme configuration entry, placed in the application header or toolbar:

> [!TIP]
> 
> The current theme tokens update immediately after panel operations, making it easy to verify configuration changes. Use 
> 
> useTheme
> 
>  to read reactive state:

```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>
```

## Features

### Primary Color Configuration

- **Primary**: Choose the main brand color, supporting black or preset colors
- **Neutral**: Configure neutral tones affecting text and backgrounds

### Style Configuration

- **Radius**: Adjust global border-radius size (0–5 levels)
- **Icons**: Switch icon sets (Lucide, Phosphor, Tabler)

### Color Mode

Three color modes are supported:

- `light`: Light mode
- `dark`: Dark mode
- `system`: Follow system preference

### Export Configuration

Once configured, you can export:

- `main.css`: CSS variable configuration
- `app.config.ts`: Application configuration code

## 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](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.