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. Or head over to this link https://portals.noloco.io/~/_/settings/theme choose the app you want, or it will automatically open the last active app after 5 seconds.
Navigation Layout
You can choose between two navigation layouts for your Noloco app:
Sidebar Navigation (Default)
The sidebar navigation displays your app's pages in a vertical navigation panel on the left side of your app. This layout is ideal when you have a large number of pages or a deeply nested structure, as it provides ample space to organize and display your navigation hierarchy.
Top-bar Navigation
The top-bar navigation displays your app's pages horizontally across the top of your app. This layout is better suited for apps with a smaller number of pages and provides increased horizontal width for your content, giving your pages more room to breathe.
Navigation Theme
Noloco offers three navigation theme options that control the appearance of your sidebar or top-bar:
Accent (Default)
The Accent style uses your chosen theme color as the background for your navigation. This creates a bold, branded appearance that makes your navigation stand out. Buttons, links, and other elements throughout your app will also use your theme colors.
Neutral
The Neutral style creates a more subtle navigation appearance. In light mode, the navigation background is white, while in dark mode it appears close to black, instead of using your accent theme color. Buttons, links, and other elements throughout your app will still use your theme colors, maintaining your brand identity while creating a cleaner, more minimal navigation.
Contrast
The Contrast style uses a slightly off-white background for your navigation in light mode, providing more visual separation between the navigation and the body of your page. In dark mode, this same contrast principle applies with an appropriately darkened background. This style is perfect when you want clear visual distinction between your navigation and content areas.
How to change your app's theme
Default Color Theme
Noloco has 21 default colors:
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
Slate
Gray
Zinc
Stone
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.
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
Was this helpful?