Styles and Colors
This page will guide you through using automatic Styles & Colors management in Nocodable Components.
Last updated
This page will guide you through using automatic Styles & Colors management in Nocodable Components.
Last updated
To begin using Nocodable Components Color & Styles feature, you'll need to start by importing the main Color Palette and our Styles.
This can be done by visiting the "Colors & Styles" panel, and clicking the "Import colors & Styles" button.
After clicking this button, our extension will automatically import the list of Color Variables and Styles used in our components library.
This will not affect your app's existing Styles & Colors. It will simply add them alongside the existing ones.
Color Variables and Styles are app dependant. Which means that if you have multiple apps on which you want to use this feature, you'll need to import styles and colors separately on each app.
Once you've imported our Colors & Styles to your app, you will now be able to turn on the "Import with Styles" toggle, on top of the components.
When this switch is toggled, it means that the component will be copied with it's styles and colors.
When this switch is not toggled, it means that the extension will copy a "naked" version of the component that will not have dynamic colors and styles.
When browser the library, you can see that most components have a "brush" icon next to their names.
This means that these component can be imported with dynamic Colors & Styles. If the icon is not visible, then only the unstyled version can be imported.
We're in the process of updating all our components to make sure they can imported with Styles & Colors, but this takes time, so some components are still missing this feature, but will be updated soon.
If you want to change the colors from the palette, you can easily do it from the "Styles" panel of your app, after you've Colors & Styles to your app.
Make sure to simply modify the colors, not delete them. Otherwise it will affect all the styles using this color variable.
By default, we use an 11 shades color palette. If you need to generate yours, you can use this free tool : UI Colors
For example, if your primary colors is #85C99A
Start by generating the corresponding color palette with UI Colors :
Now, simply copy and paste each color shade to your Bubble app. This is the tedious part of the system, but this will be automated soon.
Most of the time, you'll simply need to modify the "Primary/xx" color variables. But depending on your app, you can also modify the other ones.
Now that this is done, you can import a component with styles, and it will automatically have your colors !
If you have imported our styles to your app and want to remove them, you can simply use the "Remove all" button.
This will remove all Color Variables and Styles imported by Nocodable Components.
However, if you're still using some of these colors or styles, some issues will appear.
You can still re-import them if you see any new issues appearing after removing them. This will make the issues disappear.
