"default" colors, and how to change/set them ?

[ThePrincelle]

Hi.
First of all, thanks for this library, it is really handy!

The title of this topic could be "How to do themes?".

I'm using it partially with some of my own Vue.js and I would like to define my own primary, secondary, ... colors.

I was wondering what "default" meant in the colors. And if it's possible to apply a theme to 'default' and 'alternative' colors instead of replacing the 'blue' color by something else in the tailwind config file which is not ideal.

I could just create my own Vue components based on the Flowbite library with the HTML templates in the documentation and apply a defined color in the configuration of themes in Tailwind, but I mean, if flowbite-vue is destined to be the recomended way of using Flowbite, why would I ?

I came across "flowbite-themable" too and I could apply it on the top level of my application but I'm wondering if it could not be simpler to just define colors in the configuration of Tailwind. Furthermore, defining the theme in Tailwind directly could allow the final user to choose whatever range of color they "like".

Thanks in advance for your response,
Maxime

[Extarys]

I discovered flowbite and the vue plugin yesterday, and I'm also wondering how to tweak it. Setting current and new colours for buttons, rounding of buttons, spacing, etc.

[stritti]

I created an main.scss within my assets, where I overwrite the values. I don't know if this is the best way:

/assets/main.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;

  h1 {
    @apply text-3xl font-bold py-2 mb-4;
  }
  h2 {
    @apply text-2xl font-bold py-2 mb-4;
  }
  h3 {
    @apply text-xl font-medium py-2 mb-4;
  }
  h4 {
    @apply text-lg py-2 mb-4;
  }
  p {
    @apply pb-2 text-gray-800;
  }
[...]

[zoltanka]

I think it is still not really doable. The only way I see is to wrap the usage of each component into a component of your own. Take the defined list of styles from useButtonClasses.ts, adjust it and apply then in your own component.