How do I change the color of a Theme in PrimeVue4?

[Aggrototem2]

In the old days it was just
import 'primevue/resources/themes/lara-light-blue/theme.css' // Lara Light Blue

but how do I change it now?
Obviously I add Lara Theme in the main.js

  .use(PrimeVue, {
    theme: {
      preset: Lara,
      options: {
        prefix: 'p',
        darkModeSelector: '.dotr-dark',
        cssLayer: false,
      },
    },
  })

But how do I change the main color? The Documentation says something about

// With CSS
var(--p-blue-500)

// With JS
$dt('blue.500').value

but where do I put this? Sorry I am lost :(

[j0rgedev]

Hello @Aggrototem2. Since PrimeVue 4 was released, a new design system appeared called design tokens. In order to customize a theme (Lara, Nora, etc) you need to set your custom preset based on any theme.

// src/themes/app-theme.js
import { definePreset } from '@primevue/themes'
import Aura from '@primevue/themes/lara'

const LaraCustomPreset = definePreset(Lara, {
  semantic: {
    primary: {
      // these are my custom colors
      50: '#e8f0f6',
      100: '#c2d0e3',
      200: '#9db0d0',
      300: '#758fbb',
      400: '#4d6aa2',
      500: '#112243',
      600: '#0f1e3a',
      700: '#0d1a31',
      800: '#0a1630',
      900: '#08142b',
      950: '#050b1d',
    },
    colorScheme: {
      light: {
        primary: {
          color: '{primary.500}',
          contrastColor: '#ffffff',
          hoverColor: '{primary.600}',
          activeColor: '{primary.700}',
        },
        secondary: {
          color: '{secondary.500}',
          contrastColor: '#ffffff',
          hoverColor: '{secondary.600}',
          activeColor: '{secondary.700}',
        },
        highlight: {
          background: '{primary.50}',
          focusBackground: '{primary.100}',
          color: '{primary.700}',
          focusColor: '{primary.800}',
        },
      },
      dark: {
        primary: {
          color: '{primary.400}',
          contrastColor: '{surface.900}',
          hoverColor: '{primary.300}',
          activeColor: '{primary.200}',
        },
        highlight: {
          background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
          focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
          color: 'rgba(255,255,255,.87)',
          focusColor: 'rgba(255,255,255,.87)',
        },
      },
    },
  }
})

export default {
  preset: LaraCustomPreset,
  options: {
    darkModeSelector: '.p-dark',
    ripple: true,
  },
}

// src/main.js
import PrimeVue from 'primevue/config';
import LaraCustomPreset from '@/themes/app-theme.js';

app.use(PrimeVue, {
    theme: {
        preset: LaraCustomPreset
    }
 });

You could customize all primevue components, and to do so, you'll have to read the docs: PrimeVue Customization