# Theme & Design

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.

![](/files/WzjMwB22sOwLJpL901F4)

### How to change your app's theme

{% @arcade/embed flowId="pKthndNf8pSaO6psSIEc" url="<https://app.arcade.software/share/pKthndNf8pSaO6psSIEc?embed=true>" %}

### Default Color Theme

Noloco has 10 default colors:

* Red
* Orange
* Yellow
* Indigo
* Green
* Grey
* Blue
* Teal
* Purple
* Pink

![](/files/iUSFnFlVtQuswgfMZnmo)

### 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`.&#x20;

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.&#x20;

<img src="/files/nRUPCbXDHh1ZEhuBdvXq" alt="" data-size="original">

### 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.&#x20;

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.

<table><thead><tr><th width="160.57142857142856">Shade</th><th>Usage</th></tr></thead><tbody><tr><td>50</td><td></td></tr><tr><td>100</td><td><ul><li>Calendar active day background</li><li>Edit mode switch background</li></ul></td></tr><tr><td>200</td><td><ul><li>Nav item text</li><li>Edit most switch background on hover</li><li>Record comments border</li></ul></td></tr><tr><td>300</td><td><ul><li>Edit mode switch border</li></ul></td></tr><tr><td>400</td><td><ul><li>Some badge backgrounds</li></ul></td></tr><tr><td>500</td><td><ul><li>Primary button background</li><li>Stage section, selected background</li><li>Text links</li><li>Tab text</li></ul></td></tr><tr><td>600</td><td><ul><li>Sidebar footer background</li><li>Nav item background on hover</li><li>Primary button background on hover/focus</li><li>Calendar event background</li></ul></td></tr><tr><td>700</td><td><ul><li>Main sidebar background</li><li>Tab bottom border</li></ul></td></tr><tr><td>800</td><td><ul><li>Nav item record count background</li></ul></td></tr><tr><td>900</td><td><ul><li>Active nav item background</li></ul></td></tr><tr><td></td><td></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.noloco.io/~/revisions/4ycMT0EcUe4aYSGLpT5Z/settings/theme-and-design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.