Presets

See here for presets: https://primevue.org/theming/styled/#presets

Colors

The colors are not changed just because we change the theme preset. Colors can be changed like this, in nuxt.config.ts:

// ...
  primevue: {
    options: {
      theme: {
        preset: {
          semantic: {
            primary: {
              50: '{indigo.50}',
              100: '{indigo.100}',
              200: '{indigo.200}',
              300: '{indigo.300}',
              400: '{indigo.400}',
              500: '{indigo.500}',
              600: '{indigo.600}',
              700: '{indigo.700}',
              800: '{indigo.800}',
              900: '{indigo.900}',
              950: '{indigo.950}'
            }
          }
        }
      }
    }
  }
//...

Changing All Kinds of Theme Options

It's not really like we want to change the theme entirely in nuxt.config.ts. We can create a new file where all the options are defined.

Let's try and create ./theme/DataMadsenTheme.ts. It looks like this

import { definePreset } from "@primevue/themes";
import Aura from "@primevue/themes/aura";

export default definePreset(Aura, {
  semantic: {
    primary: {
      50: '{yellow.50}',
      100: '{yellow.100}',
      200: '{yellow.200}',
      300: '{yellow.300}',
      400: '{yellow.400}',
      500: '{yellow.500}',
      600: '{yellow.600}',
      700: '{yellow.700}',
      800: '{yellow.800}',
      900: '{yellow.900}',
      950: '{yellow.950}'
    }
  }
});

Then adjust nuxt.config.ts like this:

import DataMadsenTheme from './theme/DataMadsenTheme';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: [
    '@primevue/nuxt-module'
  ],
  primevue: {
    options: {
      theme: {
        preset: DataMadsenTheme
      }
    }
  }
})

Trust the Past

See this commit: 99418b6

What I learned here was mostly gleaned from this video: https://youtu.be/J3KFw5sih98?list=PLC9bp-OHi-Wm2LqlXk1i-haW-1kESMIqh. The playlist that that video has many other videos covering other topics.