Customizing the primary color

[lewebsimple]

The various components use a hard-coded blue color, it would be nice to make this customizable.

Describe the solution you'd like
Defining a primary color variable and using this instead of blue would allow the primary color to be overridden on a per-project basis. Its default values can still be set to blue to make this change transparent to the user.

Describe alternatives you've considered
Manually overriding the generated CSS is out of the question, what I'm doing right now is setting blue to my desired color but this prevents from using blue elsewhere in the code.

Additional context
This is similar to what DaisyUI does.

[zoltanszogyenyi]

Hey @lewebsimple,

This is something that we've been exploring the past few weeks, but we're still not 100% decided on this aspect.

The advantage is quite obvious, that per project base it is much easier to change the primary/secondary/tertiary colors, however, it will mean that we'll have to introduce a class that is not available with a default Tailwind configuration.

We will do this change if this request will have enough traction and demand.

Overall, we would like to keep all of the components as little opinionated as possible in comparison with Tailwind CSS.

Edit: I'll transfer this to the Github discussions area.

[lewebsimple]

OK thanks for the quick followup.

I think I understand why adding an ‘internal’ layer of colors would make the library more opinionated, as these new color variables could collide with those of the user. Maybe adding a name prefix could offset this risk?

I’ll prepare a fork to illustrate the approach I’m suggesting (along with documentation) as I’d really like to see this feature come to life!

[zoltanszogyenyi]

Awesome! I'll be waiting for that to review.

[TechAkayy]

I could see that you have already implemented it here (for eg, bg-primary-600) - https://flowbite.com/blocks/marketing/hero/. Really nice!

Would be great to have the docs updated under the Theming/Colors pages to highlight these variables.. I guess they are primary, secondary & tertiary, or are there more? Thanks.

[rhscjohn-dev]

Not sure if this helps but this how I set up a Material Theme in tailwind.config.cjs. This seems to give you maximum flexibility in your components. Not crazy about the setup for dark mode. It is what it is. I used Shades Generator to help in the color generation.

const colors = require('tailwindcss/colors')

const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
  ],

  theme: {
    extend: {
      colors: {
        'primary': {
          50: '#f4f8fd',
          100: '#e8f1fb',
          200: '#c6ddf4',
          300: '#a3c8ed',
          400: '#5e9fe0',
          500: '#1976d2',
          600: '#176abd',
          700: '#13599e',
          800: '#0f477e',
          900: '#0c3a67',
          DEFAULT: '#1976d2', //500
          'on': '#f4f8fd',    //50  
          'dark': {
            DEFAULT: '#a3c8ed', //300
            'on': '#0f477e',    //800  
          }
        },
        'secondary': {
          '50': '#f4fbfa',
          '100': '#e9f6f5',
          '200': '#c9e9e6',
          '300': '#a8dbd7',
          '400': '#67c1b8',
          '500': '#26a69a',
          '600': '#22958b',
          '700': '#1d7d74',
          '800': '#17645c',
          '900': '#13514b',
          DEFAULT: '#26a69a', //500
          'on': '#f4fbfa',    //50  
          'dark': {
            DEFAULT: '#a8dbd7', //300
            'on': '#17645c',    //800  
          }
        },
        'tertiary': {
          '50': '#faf4fb',
          '100': '#f5e9f7',
          '200': '#e6c9eb',
          '300': '#d7a9df',
          '400': '#ba68c8',
          '500': '#9c27b0',
          '600': '#8c239e',
          '700': '#751d84',
          '800': '#5e176a',
          '900': '#4c1356',
          DEFAULT: '#9c27b0', //500
          'on': '#faf4fb',    //50  
          'dark': {
            DEFAULT: '#d7a9df', //300
            'on': '#5e176a',    //800  
          }
        },
        'error': {
          '50': '#fcf2f3',
          '100': '#f9e6e8',
          '200': '#f0bfc5',
          '300': '#e699a1',
          '400': '#d44d5b',
          '500': '#c10015',
          '600': '#ae0013',
          '700': '#910010',
          '800': '#74000d',
          '900': '#5f000a',
          DEFAULT: '#c10015', //500
          'on': '#fcf2f3',    //50  
          'dark': {
            DEFAULT: '#e699a1', //300
            'on': '#74000d',    //800  
          }
        },
        'surface': {
          '50': colors.gray[50],
          '100': colors.gray[100],
          '200': colors.gray[200],
          '300': colors.gray[300],
          '400': colors.gray[400],
          '500': colors.gray[500],
          '600': colors.gray[600],
          '700': colors.gray[700],
          '800': colors.gray[800],
          '900': colors.gray[900],
          DEFAULT: colors.gray[50], //50
          'on': colors.gray[900],    //900 
          'dark': {
            DEFAULT: colors.gray[900], //900
            'on': colors.gray[50],    //50  
          }
        },

      }
    },
  },

  plugins: [
    require('flowbite/plugin')
  ],
  darkMode: 'class',
};

module.exports = config;

[elamonii]

Thanks a ton

[beonami]

How to customize the ring for each input (forms)?

[zoltanszogyenyi]

Hey peeps 👋

We'll provide an update for Flowbite where instead of using "blue" we'll use "primary" which can be easily set via the config file. This means that overriding the primary variable in the config file will also change focus state colors for checkboxes, input fields, and other pseudo selectors.

Will probably drop for v1.6.3.

Cheers,
Zoltan

[zoltanszogyenyi]

We'll most likely introduce an update for the upcoming v1.6.4 version.

[zoltanszogyenyi]

Also, you can do this now too if you "search and replace" the "-blue-" with a custom "-primary" and set the primary colors yourself. Here's an example of a config file (if you click on show code and then the config file) from the Flowbite Blocks collection:

Hero sections.

[trollbot38]

I'd love to except I'm using flowbite-react, which doesn't let me replace classes in there that I'm aware of. For now I'm overriding blue via config file (does mess with some blue that I want), but look forward to that update :)

[ignaciolarranaga]

It would be great that the flowbite-react classes also say primary ;)

[KennyAtCodin]

this wasn't releases, or was it?

[sunncyn]

could you provide the document or example to set this. I found some problem related to global css when try to update the tailwind.config.js. thank a lot

more context I use nextJS

[zoltanszogyenyi]

Please check my comment in the reply section - you can change the default blue classes to primary and set the primary yourself, at least until we provide a more built-in solution.

[rahul37865]

We are on 1.8.1 I think its still not yet available ? I haven't found anything on official doc am i missing something ?

[padcom]

I think I found a way that makes a bit more sense than overriding the entire theme and loosing access to primary colors.

TLDR;
Assuming we'd like to have the primary button or some other thing styled in a different way, create a class of your choosing (e.g. .primary) and use @apply to define what .primary means. Then add that class to the component you would like to customize (e.g. <Button class="primary" color="green"> and your styles will be applied.

Explanation for those who really need it:
The way classes are generated in the resulting CSS file determines which styles will be applied when multiple classes defining that same property are specified. This is why when you apply text-yellow-500 to the Button its color changes, but when you do .text-red-500 nothing changes. The class .text-white is applied by default and since the classes are sorted alphabetically (to some extent) then the white is after red but before yellow.

But there is hope! TailwindCSS puts the classes defined after @tailwind base/components/utilities at the end of the file so they get the top-most priority. Hence, if you define your custom class for example for the primary button that class is defined last and has the highest priority when applying multiple values for the same CSS property.

[padcom]

You can also check my vue.js template - it has everything installed by default (vue, i18n, eslint, tailwindcss, flowbite, importing of SVG files - needed for flowbite icons - and unit testing preconfigured with coverage report). It's what I use for my everyday work and it is all properly battle-tested.

To use it, issue the following commands:

npm create from-github padcom/vue example1
cd example1
npm install
npm start

You'll notice the button text and icon color are properly overridden.

Hope that helps!