PrimeVue Theming Demystified

[@SimonBrunner-n7u]

Ok, i tried it out with PrimeNG 18.2 and man - this is so superior! Especially when working with a design team! Thank you very much for your efforts!

[@algoritimbilisim]

PrimeVue is one of the best of it's kind. Keep it up 👍

[@MrSabifa]

When will the new Figma plugin be released?

[@cagataycivici]

@@MrSabifa By the end of this year hopefully.

[@Fraps224]

I like the 'Noir' as primary and 'Slate' as surface. How to set them?

[@moisesmagalhaes880]

Why are the presets examples removed from the documentation?

[@Kerni094]

This is amazing, a tutorial on cssLayers & Tailwind would be great. Especially when you use Tailwind with Styled Mode and when to use Tailwind with Unstyled Mode.

[@cagataycivici]

@@Kerni094 As a coincidence, TW integration tutorials are coming up with styled and unstyled as you mentioned, lot of important concepts to cover

[@connorabbas6449]

PrimeVue v4 is great, thanks for your work on this. My only issue is the SSR support with the new styled mode theming. I am unable to get the theme CSS to load server-side with the standard theme configuration. Is there a way to export a theme preset to a css file, or directly manage the dynamic imports? For context, I am having this issue with an Inertia.js SSR Laravel application, and a Nuxt application using universal (server-side) rendering.

[@cagataycivici]

@@connorabbas6449 Nuxt module handles this for Nuxt SSR but we haven’t worked on Inertia yet. I will discuss it with the team, thank you for the feedback.

[@bogdanpetre-pvb]

hello, I find this primvue very helpful and thank you for your work. How can I do it if I want to override secondary color, success, info, and so on? Globally. thanx!

[@ellgibug]

Thank you for the video!

[@portillajoe]

I hope you guys also make the tutorial for primeng. Thanks for such good work.

[@cagataycivici]

Definitely, right after v18 final, focus will switch to NG

[@leonardobuscemiwork]

The customization concepts seen in this video will also be applicable to primeng?

[@cagataycivici]

@@leonardobuscemiwork Yes, same. Already available in v18-beta.2. I will create new tutorials for PrimeNG after v18 final is out.

[@leonardobuscemiwork]

@@cagataycivici thanks! Great news, I can already start my tests, but I can't wait for you to create the dedicated video

[@banoonoo5]

how did you get the variable name at 10:45 without looking at the text from 9:10? we see button.padding.x --p-button-padding-x how did you know its supposed to be paddingX instead? from the text above i'd expect it to be: button:{ padding:{ x: '1rem' } }

[@banoonoo5]

EDIT: read the docs, it seems both options are supposed to work, amazing!

[@bunomonteiro]

Why don't severities have semantic tokens?

[@cagataycivici]

Semantic is good for reuse, the default themes did not share severities much but you can do it in your own custom theme for sure. You can add semantic.extend.severity.* tokens. primevue.org/theming/styled/#extend

[@luisbrescia8497]

How can i get my preset in a different file in nuxt? import MyTheme from '@/themes' export default defineNuxtConfig primevue: { options: { ripple: false, theme: { preset: Theme ,

[@aturan-fo1qt]

👍👍