I am fairly new to Vue and found this awesome package. Unfortunately, I have run into some trouble when trying to apply a theme. Currently I am trying to use the bootstrap4-dark-blue theme. When I try to use the theme some of the surface colors are applied to my components, but not the background of my entire page, so it is just white, with black components.
If anyone could tell me how to fix the background I would be very happy.
main.js
Code: Select all
// 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('Button', Button)
.mount('#app')
Code: Select all
<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>