Apply different themes

UI Components for Vue
Post Reply
Freddster
Posts: 2
Joined: 23 Nov 2020, 19:39

23 Nov 2020, 19:57

Hi

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')
App.vue

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>
A small snippet of the website is inserted below to give an idea of what it currently looks like
Image

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest