bug: Inconsistent Design Between Light and Black Themes

[tasinone]

What version of FlyonUI are you using?

2.4.1

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

Describe your issue

There is a design inconsistency between the themes regarding the Checkmark and Toggle components. Currently, the "Light" and "Dark" mode uses square corners, while the "Black" and some other themes uses rounded corners. This creates a jarring visual jump when a user switches between themes.

Could you please unify these styles? Specifically, I would like to use square corners for both the Checkmark and Toggle components across all themes. For now I am gonna use some custom css but please fix this.

Additionally, could you provide the exact import names for these components? The doc says to import like <script src="../node_modules/flyonui/dist/accordion.js"></script> But I don't see how do I import context-menu or drawer. If each component also serve this info what to import then it will be very helpful.

[github-actions]

Hi @tasinone

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[yagnikvamja]

Hello @tasinone,

FlyonUI comes with multiple predefined themes. By default, it provides Light and Dark modes, and both of these share the same base styling. However, themes such as Black and some others define their own design variables, which can result in visual differences across components like checkboxes, toggles, cards, buttons, and more. This is why you’re noticing variations in border radius and overall appearance when switching themes.

The border radius behavior is controlled through theme variables. You can review and customize these settings by referring to the following documentation:

• Theme customization: https://flyonui.com/docs/customization/themes/
• Border Radius Variables: https://flyonui.com/docs/customization/utilities/#extended-border-radius-utilities

Regarding JavaScript imports:

• Context Menu relies on the Dropdown component, so you’ll need to include:

  <script src="../node_modules/flyonui/dist/dropdown.js"></script>

• Drawer uses the Overlay utility, which can be imported via:

  <script src="../node_modules/flyonui/dist/js/overlay.js"></script>

For detailed JavaScript behavior, you can check the “JavaScript behavior” section at the bottom of each relevant JS component’s documentation page.

Thank you for your valuable feedback. We’ll look into maintaining a clearer list of component-specific imports to make this easier for everyone.

If still you face any issue, then please let us know.

~ Best regards,