Colors

FlyonUI offers a robust and flexible color system that allows you to manage themes and colors seamlessly. Instead of relying on hard-coded utility color classes like:

• bg-red-500
• bg-lime-500
• bg-fuchsia-500

FlyonUI encourages the use of semantic color utility classes such as:

• bg-primary
• bg-info
• bg-error

These semantic classes simplify theme customization and management across multiple modes (e.g., dark or light themes). Each theme dynamically assigns colors to these classes via CSS variables, allowing your design to adapt effortlessly to theme changes.

Using semantic color names provides a more organized, consistent approach to your design system. Instead of randomly picking colors for each component, you define a palette with specific roles (e.g., primary, secondary). This approach ensures:

• Consistency: Enforces a unified color palette across your UI.
• Theming Flexibility: Allows for seamless switching between themes, with colors automatically adapting through CSS variables.
• Scalability: Easily extend the system to support multiple themes (beyond just light and dark) by simply modifying a few CSS variables.

FlyonUI provides a comprehensive list of color options, which can be used either within themes or as utility classes. Below is a table of available color options, along with examples of how to use them.

FlyonUI components come with predefined color utility classes. To apply colors to your components, simply use one of these classes:

<span class="badge badge-primary">Badge</span>

Or for input elements:

<input type="radio" class="radio radio-primary" />

FlyonUI’s color utilities follow a similar pattern to Tailwind’s default color utilities. You can easily apply colors to various aspects of your UI using the following syntax:

bg-{COLOR_NAME}
to-{COLOR_NAME}
via-{COLOR_NAME}
from-{COLOR_NAME}
text-{COLOR_NAME}
ring-{COLOR_NAME}
fill-{COLOR_NAME}
caret-{COLOR_NAME}
stroke-{COLOR_NAME}
border-{COLOR_NAME}
divide-{COLOR_NAME}
accent-{COLOR_NAME}
shadow-{COLOR_NAME}
outline-{COLOR_NAME}
decoration-{COLOR_NAME}
placeholder-{COLOR_NAME}
ring-offset-{COLOR_NAME}

For example:

• Background color: bg-primary
• Text color: text-secondary
• Border color: border-accent
• Shadow color: shadow-primary

With this system, you can easily apply semantic colors throughout your UI, making theme switching and color management intuitive and scalable.