> For the complete documentation index, see [llms.txt](https://pencilr.gitbook.io/react-native-pencilr-app-with-backend/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pencilr.gitbook.io/react-native-pencilr-app-with-backend/theme-dark-light-mode.md).

# Theme (Dark / Light Mode)

The app supports dark/light mode

![](https://1827193846-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1QTd2VkMHX-_ibF2b8%2F-M1_5doGBsqveAgSqcTl%2F-M1_9JLfz0tPSYkSu8KK%2Fsmartmockups_k7bpi11f.jpg?alt=media\&token=5fa315f6-5a63-43c3-9ca7-d8a1ead36446)

1. Background (0dp elevation surface overlay)
2. Surface (with 1dp elevation surface overlay)
3. Primary
4. Secondary
5. On background
6. On Surface
7. On Primary
8. On Secondary

to update your colors, go to `src/theme/theme.colors.ts` and update the **dark** and **light** colors of your choice:

```typescript

export const themes: ThemeColors = {
  light: {
    background: "#f7f7f7",
    surface: "#ffffff",
    primary: "#6002ee",
    secondary: "#6002ee",
    onBackground: "#101010",
    onSurface: "#1c1c1c",
    onPrimary: "#ffffff",
    onSecondary: "#ffffff",
    // extras
    type: "light",
    font: "Avenir Next"
  },
  dark: {
    background: "#101010",
    surface: "#1c1c1c",
    primary: "#bb86fb",
    secondary: "#59dbc6",
    onBackground: "#cecece",
    onSurface: "#e1e1e1",
    onPrimary: "#000000",
    onSecondary: "#000000",
    // extras
    type: "dark",
    font: "Avenir Next"
  }
};
```