Docs

Make a theme

1. Open the editor. The setup asks four things: a base style, your brand color, corners and neutrals. Or start from one of the examples.
2. Adjust from there. Colors and Shape & spacing change the whole library; Components has shared styles (form fields, lists, menus, overlays) and every single component, six of them with a visual editor.
3. Check it under Review: what you changed, and contrast in light and dark, with a fix for each failure.

Everything is saved in your browser as you go; there’s nothing to sign up for.

Add it to your app

Export gives you a preset file with only what you changed, on top of your base style, and the setup for Nuxt or Vue. Your app needs PrimeVue 4 and @primeuix/themes 2:

npm install primevue@4 @primeuix/themes@2

Nuxt

Add the PrimeVue module too:

npm install @primevue/nuxt-module@4

Save the preset as themes/my-theme.ts, wrap it for the module, and point Nuxt at it. On Nuxt 4, ~ means the app/ folder, so the files go in app/themes/.

// themes/theme.ts
import MyThemePreset from './my-theme'

// @primevue/nuxt-module expects { preset, options }, not a bare preset.
export default {
  preset: MyThemePreset,
  options: {
    darkModeSelector: 'system', // or a class, e.g. '.app-dark'
  },
}

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@primevue/nuxt-module'],
  primevue: {
    importTheme: { as: 'AppTheme', from: '~/themes/theme.ts' },
  },
})

The module needs { preset, options }. Pointing it at the bare preset gives you no theme at all.

Vue with Vite

Save the preset as src/themes/my-theme.ts and register it where you create your app:

// main.ts
import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import App from './App.vue'
import MyThemePreset from './themes/my-theme'

createApp(App)
  .use(PrimeVue, {
    theme: {
      preset: MyThemePreset,
      options: {
        darkModeSelector: 'system', // or a class, e.g. '.app-dark'
      },
    },
  })
  .mount('#app')

Dark mode

Every color has a light and a dark value. With darkModeSelector: 'system' your app follows the visitor’s system setting. To switch it yourself, use a class instead:

// in the theme options
darkModeSelector: '.app-dark',

// wherever your app toggles it
document.documentElement.classList.toggle('app-dark')

Change it later

Your themes stay in this browser: come back in the same browser and they’re there. To keep a copy or move it, use Export → Share → Download for the theme file, and open it with Theme menu → Import theme file. After a change, export again and replace the preset file in your app.

Share a theme

Export → Share gives a link that carries the whole theme inside it; nothing is uploaded. Whoever opens it gets their own copy, as a new theme. Some chat apps cut very long links; the theme file always works.

Privacy

Your themes never leave your browser. Share links keep the theme after the #, which browsers don’t send anywhere. The site counts anonymous page views with Vercel Web Analytics, without cookies.

What’s supported

• PrimeVue 4 in styled mode, with @primeuix/themes 2 and its four base styles: Aura, Lara, Nora and Material.
• All 88 components of those presets, in light and dark.
• Not covered: unstyled mode, and fonts. PrimeVue doesn’t set a font, so your app’s own font applies.

If something looks wrong

• Nuxt shows the default theme: check that theme.ts exports { preset, options } and that importTheme points at it (inside app/ on Nuxt 4).
• Dark mode doesn’t switch: darkModeSelector has to match how your app marks dark mode.
• Colors differ from the editor: check that nothing else in your app sets the --p-… variables or restyles the components.