Simplified Theme Customization with Color Roles

[guplem]

Description
Flowbite currently uses mainly "cyan" as the default color, making it hard (and weird) to customize the primary color (or the main color palette).
Introducing color roles like "primary," "secondary," and "accent"—inspired by frameworks like Material 3—would make theme customization more intuitive and scalable.

Why is this needed?

1. Easier Customization: Allow defining roles (e.g., primary) directly in the TailwindCSS configuration.
2. Consistency: Use semantic roles to ensure a unified and consistent look across components.
3. Alignment with Design Standards: Adopt modern practices similar to Material 3, which uses well-defined color roles.

Proposed Solution
Add semantic color roles such as primary, secondary, and accent to the default TailwindCSS theme. These roles can be customized globally in the theme.extend.colors section.

Example Implementation

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#f7f6ff",
          500: "#5645f5", // Main primary color
          900: "#2a2278",
        },
        secondary: {
          500: "#03DAC5", // Example secondary color
        },
        accent: {
          500: "#FF5722", // Example accent color
        },
      },
    },
  },
  plugins: [require("flowbite/plugin")],
};

Components would reference roles such as theme('colors.primary.500'), theme('colors.secondary.500'), or theme('colors.accent.500') instead of hardcoding specific colors like cyan.

Relevant Discussion
This proposal addresses concerns raised in GitHub Discussion #973. Developers noted the difficulty of overriding "cyan" as the default, and introducing semantic roles simplifies customization. Material 3’s color roles provide a great reference for this approach.

Conclusion
Introducing semantic color roles like primary, secondary, and accent in TailwindCSS for Flowbite would improve usability, consistency, and alignment with modern design standards. This change reduces confusion and makes theme customization more flexible.

Feedback is welcome!

[SutuSebastian]

There's a theming system revamp happening in #1498 PR, but only the primary color will be used within the components.
We'll revise the rest of color tokens (eg: brand, secondary, accent) in the near future.

[lmcnulty]

+1 on this. In our project we don't use cyan anywhere, so we ended up overriding all of the cyan-xxx colors in our Tailwind config with the primary color we wanted, which works but is extremely hacky.