Theme System

Introduction

Movk Nuxt provides unified runtime theme management on top of Nuxt UI theming: colors, radius, fonts, icon sets and dark mode are all centrally controlled and can be interactively adjusted at runtime, with one-click export of CSS variables or configuration code.

Theme capabilities consist of three parts:

• Module defaults: Declare available options in movk.theme inside nuxt.config.ts.
• ThemePicker component: A user-facing visual control panel with export support.
• useTheme composable: Read and write theme state in scripts, export CSS/config.

Enable & Disable

The theme module is enabled by default. When disabled, appConfig defaults, the theme plugin and the ThemePicker component are no longer injected:

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

ThemePicker Component

ThemePicker provides visual switching for colors, radius, fonts, icon sets and dark mode, and can export the current theme.

useTheme

useTheme exposes reactive theme state and export methods, suitable for custom theme panels or reading theme values in business logic:

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

// Read/switch theme
color.value = 'green'
mode.value = 'dark'

// Export current theme
const css = exportCSS()
const config = exportConfig()

Customizing Options

Color aliases, radius steps, font lists and neutral colors can all be overridden in movk.theme, serving as the value range for ThemePicker and 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' }
      ]
    }
  }
})

Export & Reuse

The CSS variables exported by ThemePicker and useTheme.exportCSS() can be written directly into your project's main.css, solidifying runtime debugging results as the default theme:

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

:root {
  /* Paste variables exported by exportCSS() */
}