Changing Theme fails on Vue 3 PrimeVue

[Aleroms]

Discussed in https://github.com/orgs/primefaces/discussions/1022

^{Originally posted by Aleroms January 25, 2024}
Hello,
I've tried to the best of my abilities to follow the documentation on switching themes but have not had success. When I inspect the page, I view changes in the head, specifically the link element, where it does reflect changes. My href attribute changes from <link id="theme-link" rel="stylesheet" href="/themes/lara-light-green/theme.css"> to <link id="theme-link" rel="stylesheet" href="/themes/lara-dark-green/theme.css">, however, the actual theme does not change.

I have created a test app with just this implemented in my repo changeTheme_PrimeVue as well as a live site example.

Here are the steps I took to create this below.

how to replicate:
create vue app npm init vue@latest
install primevue npm install primevue
in main.js
register plugin and import theme
import 'primevue/resources/themes/lara-light-green/theme.css'
import "primevue/resources/themes/lara-dark-green/theme.css";
copy themes from PrimeVue resources/themes folder into public/themes
place link in index.html <link id="theme-link" rel="stylesheet" href="/themes/lara-light-green/theme.css"/>
copy and paste code from App.vue into App.vue
run dev npm run dev