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, fonts, icon sets, and color mode, with support for exporting CSS variables and app.config.ts configuration code.

Configuration changes are stored locally and automatically restored on the next visit. The component source originates from Nuxt UI.

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:

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

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

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)
Font: Select font family (default font: Alibaba PuHuiTi)
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

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

An interactive star rating component.

Tree

A tree component built on Nuxt UI Tree, adding search, lazy loading, toolbar, checkboxes, and parent/child strategy.