Theme & Design
Customize your Noloco app to match your brand's theme by choosing a custom color
Last updated
Customize your Noloco app to match your brand's theme by choosing a custom color
Last updated
In Noloco, your theme controls the color of your app's sidebar, the primary buttons, your links and more. So it's important that your Noloco app matches your brand. You can choose from one of our 10 default themes which are tuned to beautifully present your data. Or, if you want your app to match your company's brand, you can set a custom color.
You can change your app's theme from the 'Theme & design' section of your app's settings.
Noloco has 10 default colors:
Red
Orange
Yellow
Indigo
Green
Grey
Blue
Teal
Purple
Pink
If one of the default colors doesn't suit your brand, you can specify a custom color.
Head over to the 'Theme & design' settings page, and choose a custom color.
Once you put in your brand's hex code Noloco will generate 10 color shades based on that base color, ranging from 50 to 900.
You can change all of these shades and they will update the preview of your app which is shown on the right of the screen.
Instead of assigning a color for the sidebar and another for the button, our themes are derived of 10 color shades. 50 is the lightest shade, and should be almost white. 900 is the darkest shade.
Typically (but not always) your base color will be shade 500 - although if your base color is too dark or too bright this might not be the case.
While we don't define specific colors for different parts of your app, we can tell you where each shade is used, below is a non-exhaustive list of where the different color shades are used in your app.
| Shade | Usage |
|---|---|
50 | |
100 |
|
200 |
|
300 |
|
400 |
|
500 |
|
600 |
|
700 |
|
800 |
|
900 |
|
