How to customize theme?

[0xgautam]

Hi there,

So I have been using the flowbite-svelte library for my product. Have had a great experience with it.

I am building a chrome extension for my product now. Have decided to go with React. So to maintain UI consistency I want to use flowbite-react.

However, I am finding it difficult to override the primary color in the theme.

Is there a way to do this without creating a custom theme?

This is how it's done in flowbite-svelte => https://flowbite-svelte.com/docs/pages/colors

Thanks!

[MiroslavPetrik]

Hey, I think this is a major flaw here, that all the components use the cyan color as the default, instead of something like primary.
To fix this, I've simply redefined the variables for the cyan color in my tailwind config.

I believe that flowbite must fix this, as it's not scallable to pass the color prop to all the components, e.g. when my primary color is purple I won't be setting prop everywhere...

Here is my config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./node_modules/flowbite-react/**/*.js",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // cyan is used in all components as the default "primary" color
        // here we are actually overriding it to some purple color
        // so practically, the cyan means primary
        cyan: {
          50: "#f7f6ff",
          100: "#eeecfe",
          200: "#d5d1fd",
          300: "#bbb5fb",
          400: "#897df8",
          500: "#5645f5",
          600: "#4d3edd",
          700: "#4134b8",
          800: "#342993",
          900: "#2a2278",
        },

      },
    },
  },
  plugins: [
    require("flowbite/plugin")
  ],
};

[guplem]

Is there an issue for this? I think it should be way less confusing to change the color palette...

[SutuSebastian]

Working on an improved theming system as we speak.

PR #1498

[guplem]

If I am not mistaken, there is no issue directly related to this topic (using "primary", "secondary", "accent", etc. as colors for the components.
To clarify, are you planning to address this? If so, it might require a significant overhaul of the components, correct?

I went ahead and created this issue referencing this discussion.