Dynamically switching between themes

[LorenRochat]

What would be the best way to dynamically import the theme's CSS file in order to switch between themes? I created a pinia store and depending on the store i would import bootstrap4-dark-blue theme or light-blue theme.
This is my App.vue file:

Code: Select all

<script setup>
import { watch } from 'vue'
import { useThemeStore } from './themeStore'

const themeStore = useThemeStore()

watch(themeStore.$state, (state) => {
  const themeCss = state.darkBlueTheme ? 'dark' : 'light'
  import(`@/styles/${themeCss}-blue-theme.css`)
})

</script>
<template>
router-view
</template>

<style>

</style>

I copy the CSS theme files into the style folder and rename them accordingly. Unfortunately this is not working, it works the first time but when toggling the state.darkBlueTheme the theme doesn't switch.
any help would be greatly appreciated
Cheers

[bahadirsofuoglu]

Hi, I hope the example below helps you. https://primevue.org/theming/#switchthemes