How to set the primary colour of a theme in Primevue template before/on app load

I am using Primevue's Sakai template https://github.com/primefaces/sakai-vue and would like to set what the primary colour of the Aura theme should be before the app is loaded, for example using a value store in a cookie.

I can do this AFTER the app is loaded by leveraging updateColors in https://github.com/primefaces/sakai-vue/blob/master/src/layout/AppConfigurator.vue, but I would rather set those values before the app is loaded. I believe the code should go in https://github.com/primefaces/sakai-vue/blob/master/src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import Aura from '@primeuix/themes/aura';
import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';
import '@/assets/styles.scss';
const app = createApp(App);
app.use(router);
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
darkModeSelector: '.app-dark'
}
}
});
app.use(ToastService);
app.use(ConfirmationService);
app.mount('#app');

As a simple test, I have tried to add the following present, that I got from https://github.com/primefaces/sakai-vue/blob/master/src/layout/AppConfigurator.vue

const myPreset = {
  semantic: {
    primary: {
      50: "#fff1f2",
      100: "#ffe4e6",
      200: "#fecdd3",
      300: "#fda4af",
      400: "#fb7185",
      500: "#f43f5e",
      600: "#e11d48",
      700: "#be123c",
      800: "#9f1239",
      900: "#881337",
      950: "#4c0519"
    },
    colorScheme: {
      light: {
        primary: {
          color: "{primary.500}",
          contrastColor: "#ffffff",
          hoverColor: "{primary.600}",
          activeColor: "{primary.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)"
        }
      }
    }
  }
};

and changed the theme

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

The accent colour is correctly set but that of other elements, like surfaces or Toast messages, is completely gone.

How can one correctly set the theme colour on app load, as it would happen when clicking on a colour from the theme menu?

Thank you!