Theme & Design

Customize your Noloco app to match your brand's theme by choosing a custom color

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.

How to change your app's theme

Default Color Theme

Noloco has 10 default colors:

• Red

• Orange

• Yellow

• Indigo

• Green

• Grey

• Blue

• Teal

• Purple

• Pink

Custom Theme

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.

What do the color shades mean?

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	Calendar active day background Edit mode switch background
200	Nav item text Edit most switch background on hover Record comments border
300	Edit mode switch border
400	Some badge backgrounds
500	Primary button background Stage section, selected background Text links Tab text
600	Sidebar footer background Nav item background on hover Primary button background on hover/focus Calendar event background
700	Main sidebar background Tab bottom border
800	Nav item record count background
900	Active nav item background