Update: Since I couldn't resolve the issue, I decided to switch back to Vue2 and opted for Vuetify instead of Primevue.
I'm new to Vue and chose Vue3 for my project, which is related to my master's thesis. Due to a lack of UI libraries compatible with Vue3, I settled on Primevue.
Currently, I'm facing difficulties in applying a Primevue theme to my project. The dark theme isn't displaying correctly, as the background remains white while the components are styled according to the theme.
I'm seeking assistance in correctly implementing the styling.
Additionally, I'm contemplating whether it would be better to revert to Vue2 and utilize a more established UI library like Vuetify or BootstrapVue.
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import TieredMenu from 'primevue/tieredmenu';
import InputSwitch from 'primevue/inputswitch';
// import 'primevue/resources/themes/bootstrap4-light-blue/theme.css';
import 'primevue/resources/themes/bootstrap4-dark-blue/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';
const app = createApp(App);
app.use(store)
.use(router)
.use(VueApexCharts)
.use(VueEllipseProgress)
.component('TieredMenu', TieredMenu)
.component('InputSwitch', InputSwitch)
.mount('#app')
App.vue
<template>
<div id="namegoeshere">
<router-view/>
<div id="nav">
<!--<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>-->
</div>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>