customization
Base style
These are the default styles implemented by FlyonUI.
FlyonUI applies a few essential base styles to your page to ensure consistency and a better user experience.
These base styles are lightweight—less than a kilobyte in total—so they won’t affect your page’s performance.
Below is a breakdown of the styles FlyonUI adds:
Name | Description |
|---|---|
| properties | Includes necessary @rules, such as defining variable types (e.g., --radialprogress). |
| rootcolor | Defines the background-color and text color for :root and [data-theme], setting them to base-100 and base-content respectively. |
| scrollbar | Customizes scrollbar appearance using scrollbar-color on :root. |
| svg | Provides small inline SVG assets, including noise filters, chat bubble tails, and tooltip tails. This can be disabled if you prefer using custom images. |
Opting Out of Specific Base Styles
If you wish to exclude any of these base styles, you can do so by modifying the FlyonUI configuration using the exclude option.
For example, to opt out of both the scrollbar styles (scrollbar, scrollbar-color) and the root color styles, add the following to your FlyonUI plugin settings:
@plugin "flyonui" {
exclude: scrollbar, rootcolor;
}
You can explore the source code for each base style on GitHub:
- properties.css – Handles key
@rulessuch as variable definitions. - rootcolor.css – Manages theme colors for the root element.
- scrollbar.css – Customizes scrollbar styles.
- svg.css – Includes small SVG assets used for styling.
