customization
Colors
Explore FlyonUI's color system with semantic classes and CSS variables.
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-500bg-lime-500bg-fuchsia-500
FlyonUI encourages the use of semantic color utility classes such as:
bg-primarybg-infobg-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.
Benifts of the semantic color naming:
Traditional Color Approach | FlyonUI Semantic Colors |
|---|---|
❌ bg-[#1a73e8] or bg-blue-500 (Static values) | ✅ bg-primary (Dynamic, context-aware values) |
🔧 Requires separate dark mode classes (dark:bg-blue-700) | 🎨 Automatic theme adaptation with a single class |
| ⚠️ Theme changes require updating multiple color values | 🔄 Update one CSS variable to change the entire theme |
| 📝 Verbose class names for different states | 🎯 Consistent, semantic naming across states |
| 🔍 Hard to maintain color consistency | 🎪 Built-in design system compliance |
| ⏱️ More development time managing colors | ⚡ Rapid development with semantic classes |
| 🔒 Limited to explicit color definitions | 🌈 Flexible theming system with unlimited possibilities |
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.
| Color | CSS Variable | Description | Example Usage |
|---|---|---|---|
Primary | var(--color-primary) | Main color used to represent your brand or core actions. | bg-primary |
Primary Content | var(--color-primary-content) | Foreground color used on top of the primary background color for contrast. | text-primary-content |
Secondary | var(--color-secondary) | A complementary accent color, typically used to support the primary color. | bg-secondary |
Secondary Content | var(--color-secondary-content) | Used for text and content on the secondary background color for good contrast. | text-secondary-content |
Accent | var(--color-accent) | Used for highlighting key UI elements or drawing attention to specific actions. | bg-accent |
Accent Content | var(--color-accent-content) | Used for text and content that sits over the accent background color for contrast. | text-accent-content |
Neutral | var(--color-neutral) | A neutral background color, used for less prominent elements or surfaces. | bg-neutral |
Neutral Content | var(--color-neutral-content) | Used for text and content on neutral backgrounds to ensure legibility. | text-neutral-content |
Base 100 | var(--color-base-100) | The lightest surface color, ideal for general backgrounds and page content. | bg-base-100 |
Base 200 | var(--color-base-200) | A slightly darker shade, typically used for sections or elements with elevated backgrounds. | bg-base-200 |
Base 300 | var(--color-base-300) | Used for darker elements or deeper shadow effects to create elevation. | shadow-base-300 |
Base Content | var(--color-base-content) | Foreground color for elements sitting on base color backgrounds. | text-base-content |
Info | var(--color-info) | Used for informational messages or helpful tips within the UI. | bg-info |
Info Content | var(--color-info-content) | Text color to use on top of the info background for good visibility. | text-info-content |
Success | var(--color-success) | Indicates success or a positive state, often used in success messages or actions. | bg-success |
Success Content | var(--color-success-content) | Used for content and text over success backgrounds to maintain readability. | text-success-content |
Warning | var(--color-warning) | Used for alerting the user to potential issues or warnings. | bg-warning |
Warning Content | var(--color-warning-content) | Content color for text or icons on top of warning backgrounds for visibility. | text-warning-content |
Error | var(--color-error) | Indicates error or danger messages, typically used for alerts or destructive actions. | bg-error |
Error Content | var(--color-error-content) | Content color for text and elements placed over the error background. | text-error-content |
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:
CSS Class |
|---|
| bg-{COLOR_NAME} |
| text-{COLOR_NAME} |
| border-{COLOR_NAME} |
| from-{COLOR_NAME} |
| via-{COLOR_NAME} |
| to-{COLOR_NAME} |
| ring-{COLOR_NAME} |
| fill-{COLOR_NAME} |
| stroke-{COLOR_NAME} |
| shadow-{COLOR_NAME} |
| outline-{COLOR_NAME} |
| divide-{COLOR_NAME} |
| accent-{COLOR_NAME} |
| caret-{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.
