default color change

[SeungJL]

Can't I change the default color of all components to a custom color? Not cyan, but the color I want. I have to change everything, such as hover and background, to the color I use every time.

[dhavalveera]

@banana970 - You have to change the color of of background, hover effect, and all using theme, to override the color, in each Docs, in the end of the doc there's an Theme reference which shows the colors and all, and you can override them and pass the theme to the component

[SutuSebastian]

We are working on streamlining this and make proper use of colors.primary in tailwind config.

[victorfunes]

It was requested here also: https://github.com/orgs/themesberg/discussions/162

[MiroslavPetrik]

my current workaround https://github.com/themesberg/flowbite-react/discussions/973#discussioncomment-8244234

[uztbt]

I also need this feature.

[raehalme]

We are working on streamlining this and make proper use of colors.primary in tailwind config.

@SutuSebastian would it be possible to hear your thoughts and progress on this?

[SutuSebastian]

We are working on streamlining this and make proper use of colors.primary in tailwind config.

@SutuSebastian would it be possible to hear your thoughts and progress on this?

Progress is on the way, after this is done, there will be an extra tailwind config extend of colors required in order for the library to work with the new primary color.

We have to stabilise some CI/CD behaviour after the big monorepo PR merge, but after that this will be the main focus.

[Deanuxd]

We are working on streamlining this and make proper use of colors.primary in tailwind config.

@SutuSebastian would it be possible to hear your thoughts and progress on this?

Progress is on the way, after this is done, there will be an extra tailwind config extend of colors required in order for the library to work with the new primary color.

We have to stabilise some CI/CD behaviour after the big monorepo PR merge, but after that this will be the main focus.

@SutuSebastian You mentioned about the primary color, but will you also have an option to override the shade of gray (like in borders, input backgrounds, etc.)?

It would be nice to be able to change this by adding a base override to the tailwind config as well. (i.e. for a warmer feel, base: colors.stone or for a cooler feel, base: colors.slate. )

Either way glad to hear about the primary option being added!

[vitalijalbu]

Any news about that guys?? It's impossible working... need to set color to all components manually

[SutuSebastian]

Any news about that guys?? It's impossible working... need to set color to all components manually

Its a big refactor, it will take some time to get this in and a lot of breaking changes, hang tight!

[vitalijalbu]

Any news about that guys?? It's impossible working... need to set color to all components manually

Its a big refactor, it will take some time to get this in and a lot of breaking changes, hang tight!

ok thanks, because need to go on prod with react... so client expects 100% matching dashboard with his design

[walinsta]

The easiest solution is set "info" theme and override all components. If there is another solution, please let me know.

const customTheme: CustomFlowbiteTheme = { button: { color: { info: "bg-red-500 hover:bg-red-600", }, }, };

[IzaanAnwar]

I have just installed flowbite-react (first time user), and I am also not able to change the global theme,

I have this conf which I wrap around my child elements in layout.tsx (Next.js):

import type { CustomFlowbiteTheme } from "flowbite-react";

export const customTheme: CustomFlowbiteTheme = {
  accordion: {
    root: {
      base: "divide-y divide-gray-200 border-gray-200 dark:divide-gray-700 dark:border-gray-700",
      flush: {
        off: "rounded-lg border",
        on: "border-b",
      },
    },
    content: {
      base: "py-5 px-5 last:rounded-b-lg dark:bg-gray-900 first:rounded-t-lg",
    },
    title: {
      base: "flex w-full items-center justify-between first:rounded-t-lg last:rounded-b-lg py-5 px-5 text-left font-medium text-gray-500 dark:text-gray-400",
      flush: {
        off: "hover:bg-gray-100 dark:hover:bg-gray-800",
        on: "",
      },
      heading: "",
      open: {
        off: "",
        on: "text-primary-600 bg-gray-100 dark:bg-gray-800 dark:text-white",
      },
    },
  },
  button: {
    base: "group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-none",
    fullSized: "w-full",
    color: {
      primary:
        "text-white bg-primary-500 border border-transparent hover:bg-primary-600 focus:ring-4 focus:ring-primary-300 disabled:hover:bg-primary-500 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 dark:disabled:hover:bg-primary-600",
      secondary:
        "text-primary-900 bg-white border border-primary-300 hover:bg-primary-100 focus:ring-4 focus:ring-primary-300 disabled:hover:bg-white dark:bg-primary-600 dark:text-white dark:border-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 dark:disabled:hover:bg-primary-600",
    },
    disabled: "cursor-not-allowed opacity-50",
    isProcessing: "cursor-wait",
    spinnerSlot: "absolute h-4 w-4 animate-spin",
    spinnerLeftPosition: {
      xs: "ml-1",
      sm: "ml-1.5",
      md: "ml-2",
      lg: "ml-2.5",
      xl: "ml-3",
    },
    gradient: {
      cyan: "text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800",
    },
    inner: {
      base: "flex items-center",
      position: {
        none: "",
        start: "rounded-r-none",
        middle: "rounded-none",
        end: "rounded-l-none",
      },
    },
    label: "ml-2 inline-flex h-4 w-4",
    outline: {
      off: "",
      on: "border border-gray-900 dark:border-white",
      pill: {
        off: "rounded-lg",
        on: "rounded-full",
      },
    },
    size: {
      xs: "text-xs px-2 py-1",
      sm: "text-sm px-3 py-1.5",
      md: "text-sm px-4 py-2",
      lg: "text-base px-5 py-2.5",
      xl: "text-base px-6 py-3",
    },
  },
  navbar: {
    root: {
      base: "bg-white px-2 py-2.5 dark:border-gray-700 dark:bg-gray-800 sm:px-4",
      rounded: {
        on: "rounded",
        off: "",
      },
      bordered: {
        on: "border",
        off: "",
      },
      inner: {
        base: "mx-auto flex flex-wrap items-center justify-between",
        fluid: {
          on: "",
          off: "container",
        },
      },
    },
    brand: {
      base: "flex items-center",
    },
    collapse: {
      base: "w-full md:block md:w-auto",
      list: "mt-4 flex flex-col md:mt-0 md:flex-row md:space-x-8 md:text-sm md:font-medium",
      hidden: {
        on: "hidden",
        off: "",
      },
    },
    link: {
      base: "block py-2 pr-4 pl-3 md:p-0",
      active: {
        on: "bg-primary-700 text-white dark:text-white md:bg-transparent md:text-primary-700",
        off: "border-b border-gray-100 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:border-0 md:hover:bg-transparent md:hover:text-primary-700 md:dark:hover:bg-transparent md:dark:hover:text-white",
      },
      disabled: {
        on: "text-gray-400 hover:cursor-not-allowed dark:text-gray-600",
        off: "",
      },
    },
    toggle: {
      base: "inline-flex items-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden",
      icon: "h-6 w-6 shrink-0",
    },
  },
  card: {
    root: {
      base: "flex rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800",
      children: "flex h-full flex-col justify-center gap-4 p-6",
      horizontal: {
        off: "flex-col",
        on: "flex-col md:max-w-xl md:flex-row",
      },
      href: "hover:bg-gray-100 dark:hover:bg-gray-700",
    },
    img: {
      base: "",
      horizontal: {
        off: "rounded-t-lg",
        on: "h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg",
      },
    },
  },
};

export default customTheme;

[SutuSebastian]

@IzaanAnwar what exactly are u trying to change and it doesn't work?

[IzaanAnwar]

The default color

[SutuSebastian]

Fixed by #1498 in [email protected] release.

See Docs - Customizing Colors.