Applying Primevue theme - css

Question

Edit: As I was not able to figure this out, I instead dropped Vue3 and went back to Vue2 and switched to Vuetify.
I am completely new to Vue and decided to use Vue 3 for project, which is supposed to lead into my master thesis. As there are not very many UI libraries which are updated to run on Vue 3, I decided to go with Primevue.
Currently I am trying to apply one of Primevue's themes to my project, but the result is not very satisfying. I am using a dark theme, but the background is all white, while the components use the theme for the background and general styling.
I am hoping someone is able to help apply the styling correctly.
As a bonus question I am wondering whether it would be better to downgrade to Vue 2 and use a more well-established UI library such as 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>

Answer 1

I had a similar issue, having a look at the prime-vue documentation site with the devtools shows the following code is set on the body:
body {
margin: 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--surface-a);
font-family: var(--font-family);
font-weight: 400;
color: var(--text-color);
}
The variables used here come from the loaded theme. This solved the issue for me.
I couldn't find any direct information about having to set this in the docs.