Repository navigation
bug: Inconsistent Design Between Light and Black Themes #136
Description
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.
Activity
github-actions commentedon Jan 4, 2026
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 commentedon Jan 5, 2026
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:
Regarding JavaScript imports:
Context Menu relies on the Dropdown component, so you’ll need to include:
Drawer uses the Overlay utility, which can be imported via:
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,