Is it possible to configure a secondary color pallete?

[nawazishali]

I am trying to use primevue v4-rc1 along with tailwind with the help of tailwindcss-primeui plugin in styled mode. I now want to add a secondary color palette other then the primary and surface colors inside the theme file. It looks like we can't do that at the moment.

Is there any way we could do that in a streamlined way. I can directly modify the tailwind config too but then I will have colors defined in two different files which doesn't sound right and this will also not allow me to use the updatePreset method.

Looking forward to good hint.

[yury-hos]

please-please-please make it back.

[nawazishali]

I will update here once I find a relevant solution. Currently thinking of using css variables instead to define a color theme. You can connect with me on linkedIn if you are stuck in a similar problem.

[vieira-brz]

I will help you in the post below

[nawazishali]

@yury-hos I have come up with a nice solution. Check it out and let me know incase there is still some confusion.

[vieira-brz]

To achieve your goal of adding a secondary color palette to the PrimeVue styled mode while using Tailwind CSS, it's essential to find a solution that integrates well with both the Tailwind configuration and PrimeVue's theme customization capabilities. Here’s a strategy you might consider that keeps everything streamlined and avoids redundancy:

1. Customizing Tailwind's Configuration

Since Tailwind CSS is highly customizable, you can extend your tailwind.config.js to include additional color palettes. You're right about wanting to avoid having color definitions in two different places. To solve this, you can centralize your color definitions in the Tailwind config and then reference these colors within your PrimeVue theme adjustments.

Extend Tailwind Configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        secondary: {
          100: '#f0e8ff', // Lighter shade
          200: '#dab7ff', // Light shade
          300: '#c486ff', // Default shade
          400: '#b155ff', // Dark shade
          500: '#8e24aa'  // Darker shade
        }
      }
    }
  }
}

2. Referencing Tailwind Colors in PrimeVue

Once you've defined your secondary palette in Tailwind’s configuration, the next step is to integrate these colors into your PrimeVue components. Unfortunately, directly extending the PrimeVue theme via its API to include new color palettes isn’t supported natively. However, you can work around this limitation by using custom CSS that references the Tailwind utility classes.

Example of Custom Component Styling:

/* CustomComponent.css */
.custom-button {
  @apply bg-secondary-300 hover:bg-secondary-400 text-white;
}

3. Synchronize Colors in PrimeVue

To use Tailwind colors directly in your Vue components with style tags (scoped or global), you can create CSS variables in a global stylesheet that map to your Tailwind colors, and then use these CSS variables in your components.

Create CSS Variables:

/* styles.css */
:root {
  --secondary-300: theme('colors.secondary.300');
  --secondary-400: theme('colors.secondary.400');
}

Use CSS Variables in PrimeVue Components:

<template>
  <Button :class="{'custom-secondary': true}">Click Me</Button>
</template>

<style scoped>
.custom-secondary {
  background-color: var(--secondary-300);
  &:hover {
    background-color: var(--secondary-400);
  }
}
</style>

4. Dynamically Update Colors

If you need to dynamically update colors (e.g., switching themes), consider adding JavaScript that manipulates CSS variables on the :root element or through Vue’s reactive system.

5. Integration and Testing

Make sure to test the integration across all components and adjust the shades as needed to ensure visual consistency and accessibility.

By centralizing your color definitions in the Tailwind configuration and using CSS techniques to integrate these colors into your PrimeVue components, you maintain a single source of truth for colors and avoid redundancy, while still being able to utilize PrimeVue’s components effectively alongside Tailwind.

[nawazishali]

Thanks for the detailed approach I pretty much did the same implementation. Sharing my approach below.

[nawazishali]

For anyone who comes looking for a similar problem, I used the following four step approach.

1. Centralize the color pallete in your own CSS variables.

/* styles.css */
:root {
  --font-style: 'Lato', sans-serif;
  --primary-color-50: #ffffff;
  --primary-color-100: #fffffe;
  --primary-color-200: #feeed7;
  --primary-color-300: #fcddaf;
  --primary-color-400: #fbcd88;
  --primary-color-500: #fabc60;
  --primary-color-600: #f8a52a;
  --primary-color-700: #e38a07;
  --primary-color-800: #ac6905;
  --primary-color-900: #764804;
  --primary-color-950: #5b3703;
  --secondary-color-50: #e6f6f9;
  --secondary-color-100: #caecf2;
  --secondary-color-200: #95dae5;
  --secondary-color-300: #60c7d7;
  --secondary-color-400: #31b0c4;
  --secondary-color-500: #248291;
  --secondary-color-600: #1c6772;
  --secondary-color-700: #154d56;
  --secondary-color-800: #0e3339;
  --secondary-color-900: #071a1d;
  --secondary-color-950: #040f10;
}

html {
  font-size: 14px;
  font-family: var(--font-style);
}

2. Reference css variables for secondary color in tailwind.config.ts

/* tailwind.config.ts */

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    container: {
      center: true,
    },
    extend: {
      colors: {
        'secondary-50': 'var(--secondary-color-50)',
        'secondary-100': 'var(--secondary-color-100)',
        'secondary-200': 'var(--secondary-color-200)',
        'secondary-300': 'var(--secondary-color-300)',
        'secondary-400': 'var(--secondary-color-400)',
        'secondary-500': 'var(--secondary-color-500)',
        'secondary-600': 'var(--secondary-color-600)',
        'secondary-700': 'var(--secondary-color-700)',
        'secondary-800': 'var(--secondary-color-800)',
        'secondary-900': 'var(--secondary-color-900)',
        'secondary-950': 'var(--secondary-color-950)',
      },
    },
  },
  plugins: [require('tailwindcss-primeui')],
}

3. Configure your PrimeVue theme to use the primary color variables.

let myPreset = definePreset(Lara, {
  semantic: {
    primary: {
      50: 'var(--primary-color-50)',
      100: 'var(--primary-color-100)',
      200: 'var(--primary-color-200)',
      300: 'var(--primary-color-300)',
      400: 'var(--primary-color-400)',
      500: 'var(--primary-color-500)',
      600: 'var(--primary-color-600)',
      700: 'var(--primary-color-700)',
      800: 'var(--primary-color-800)',
      900: 'var(--primary-color-900)',
      950: 'var(--primary-color-950)',
    },
  },
})

4. Use your own custom method instead of relying on updatePrimaryPalette or updatePreset methods provided by PrimeVue.

I am using useCssVar composable from vueUse here but the same can be done with JS only.

let applyCustomColor = () => {
  useCssVar('--secondary-color-500').value = 'lightcoral'
  useCssVar('--primary-color-500').value = 'mediumpurple'
}

let applyDefaultColor = () => {
  useCssVar('--secondary-color-500').value = '#248291'
  useCssVar('--primary-color-500').value = '#FABC60'
}

Using the above approach all your default colors are stored in one place without depending on Tailwind or PrimeVue and you can switch color themes using just css variables as you wish. So basically your style file becomes the origin point and you can modfiy it from one place too.

[samarshrestha720]

Hi, had a quick question. Are we able to create custom semantic like primary? Like custom. I wanted to use it like <Button label="Save" severity="custom" />
I wanted to add my company colors to the custom for my buttons.

[jamesslinger]

Hi, had a quick question. Are we able to create custom semantic like primary? Like custom. I wanted to use it like <Button label="Save" severity="custom" /> I wanted to add my company colors to the custom for my buttons.

@samarshrestha720 Did you ever figure out if this was possible? I'd also like to be able to create a number of custom semantic tokens for use on the Tag component.

[nawazishali]

Hi, had a quick question. Are we able to create custom semantic like primary? Like custom. I wanted to use it like <Button label="Save" severity="custom" /> I wanted to add my company colors to the custom for my buttons.

@samarshrestha720 Did you ever figure out if this was possible? I'd also like to be able to create a number of custom semantic tokens for use on the Tag component.

I don't think custom semantic colors / tokens are possible yet, You will probably need to wrap the component from PrimeVue and add your own custom props to it.

[jamesslinger]

Ok that's a shame, thank you for the suggestion & reply.