How to activate included themes?

[bjorntj]

At the momen, I have the following in my main.js:

Code: Select all

import PrimeVue from 'primevue/config'
import InputText from 'primevue/inputtext'
import Button from 'primevue/button'
import Toast from 'primevue/toast'
import ToastService from 'primevue/toastservice'

import 'primevue/resources/themes/vela-blue/theme.css'
import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'

import 'primeflex/primeflex.css'

And I was expecting to get a dark look but that's not showing.. What am I missing?


Regards,

BTJ

[bjorntj]

I found someone who mentioned that this code is needed in the body css:

Code: Select all

  margin: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--surface-b);
  font-family: var(--font-family);
  font-weight: 400;
  color: var(--text-color);

But shouldn't this be part of the theme.css?? Also including this css does not fix all. I get the dark background but eg the buttons do not have the same background color and textcolor that the demo application shows for the same selected theme... So how is this really supposed to work??


BTJ

[bjorntj]

No one knows how to do this? What's the point in including multiple themes if it's not possible to switch between them?

[jak888]

What exactly isn't showing? Your second post solved my problem of some parts of the UI still being white, even after setting the theme dark. Other parts (sidebars etc.) had the right theme applied after including it.

As for switching between themes, I suggest you look at the demo, which does just that. You can find the repo here: https://github.com/primefaces/primevue

ultimately, it seems to be done by this call:

Code: Select all

localStorage.setItem('theme', this.theme);

[bjorntj]

Yes, it kind of works... But I do not think I should have to include my own custom css to get the dark theme, shouldn't this be part of the css from the chosen theme?

[jak888]

tbh, after I added the css, I didn't really think too much about this anymore. Your question would be for someone from the dev team to answer. I don't know why the styles for the body aren't set in the theme css.

[tugce.kucukoglu]

Themes are for components and you need to decide your own background-color (for example body). You need to customize your own css and so you need to import them.

[bjorntj]

I do not agree... When I choose a dark theme, I am expecting to get a dark theme.....