vue.jsprimevue

PrimeVue Theme Styles

I am using PrimeVue with TailwindCSS and have defined a custom theme preset using definePreset from @primevue/themes. However, my custom background color for the primary button is not being applied unless I use !important.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
import { definePreset } from '@primevue/themes'

const MyPreset = definePreset(Aura, {
    components: {
        button: {
           label: {
               font: {
                  weight: 'bold',
                }
            },
            primary: {
                background: '#b8e3ff', // Not applying unless I use !important
                color: 'red',
                hover: {
                    background: '#b8e3ff',
                }
            }
        }
    }
})

const app = createApp(App)
app.use(PrimeVue, {
    theme: {
        preset: MyPreset,
        options: {
            cssLayer: {
                name: 'primevue',
                order: 'tailwind-base, primevue, tailwind-utilities'
            }
        }
    }
}).mount('#app')

Important to note that the fontWeight for label is working properly without important.
The background: '#b8e3ff' on my primary button does not apply unless I add !important. Is there a way to fix this issue without relying on !important?

Solution

  • The default Styled Mode classes are designed for the colorScheme, so they are more strict than without it. Therefore, to override styles without using !important, you need to define the override styles within the colorScheme for both light and dark modes.

    In a way, it's logical that if you want to override the original colors, they will almost always differ between light and dark modes. So, you will likely need to customize both modes.

    const { createApp, ref } = Vue;

const app = createApp();

const MyPreset = PrimeVue.definePreset(PrimeVue.Themes.Aura, {
  components: {
    button: {
      primary: {
        // weaker rule than the default button.colorScheme.*.primary.background
        background: '#000',
      },
      colorScheme: {
        light: {
          label: {
            font: {
              weight: 'bold',
            },
          },
          primary: {
            // stronger rule then button.primary.background
            background: '#b8e3ff',
            color: 'red',
            hover: {
              background: '#b8e3ff',
            },
          },
        },
        dark: {
          /* ... */
        },
      },
    },
  },
})

app.use(PrimeVue.Config, {
  theme: {
    preset: MyPreset,
  },
});

app.component('p-button', PrimeVue.Button);

app.mount('#app');
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg.com/@primevue/themes/umd/aura.min.js"></script>

<div id="app">
  <p-button
    label="test"
  />
</div>

    Alternatively, you can use Unstyled Mode if you want full customization.