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.

ShadeUsage

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

Last updated