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

# Theme (Dark / Light Mode)

The app supports dark/light mode

To update your colors, go to `src/themes/themes.js` and update the **dark** and **light** colors of your choice:

```typescript

export const THEMES = [
  {
    key: 'DARK',
    gradientColors: ['#f1662a', '#f1662a', '#be1176', '#d01460'],
    gradientTransparentColors: ['transparent', 'transparent'],
    container: {
      backgroundColor: Black,
      headerTextColor: White,
    },
    primaryColor: White,
    primaryAlphaColor: WhiteAlpha,
    secondaryColor: LightWhite,
    secondarySColor: LLightWhite,
    buttonRed: Red,
    followColor: Red,
    followingColor: FOLLOWING,
    onlineColor: ONLINE,
    linkColor: DARKLINK,
    icons: {
      back: require('./../assets/dark/back.png'),
      close: require('./../assets/dark/close.png'),
      camera: require('./../assets/dark/camera.png'),
      delete: require('./../assets/dark/delete.png'),
      done: require('./../assets/dark/done.png'),
      send: require('./../assets/dark/send.png'),
      setting: require('./../assets/dark/settings.png'),
      options: require('./../assets/dark/options.png'),
      play: require('./../assets/dark/play.png'),
      post: require('./../assets/dark/post.png'),
      search: require('./../assets/dark/search.png'),
      comment: require('./../assets/dark/message.png'),
      unlike: require('./../assets/dark/unlike.png'),
      unmark: require('./../assets/dark/unmark.png'),
      home: require('./../assets/dark/home.png'),
      message: require('./../assets/dark/message.png'),
      activity: require('./../assets/dark/activity.png'),
      profile: require('./../assets/dark/profile.png'),
      like: require('./../assets/light/like.png'),
      mark: require('./../assets/light/mark.png'),
      selectedDone: require('./../assets/light/selectedDone.png'),
      selectedPost: require('./../assets/light/selectedPost.png'),
      selectedSearch: require('./../assets/light/selectedSearch.png'),
      selectedHome: require('./../assets/light/selectedHome.png'),
      selectedMessage: require('./../assets/light/selectedMessage.png'),
      selectedActivity: require('./../assets/light/selectedActivity.png'),
      selectedProfile: require('./../assets/light/selectedProfile.png'),
    }
  },
  {
    key: 'LIGHT',
    gradientColors: ['#f1662a', '#f1662a', '#be1176', '#d01460'],
    gradientTransparentColors: ['transparent', 'transparent'],
    container: {
      backgroundColor: White,
      headerTextColor: Black,
    },
    primaryColor: Black,
    primaryAlphaColor: BlackAlpha,
    secondaryColor: LightBlack,
    secondarySColor: LLightBlack,
    buttonRed: Red,
    followColor: Red,
    followingColor: FOLLOWING,
    onlineColor: ONLINE,
    linkColor: LINK,
    icons: {
      back: require('./../assets/light/back.png'),
      close: require('./../assets/light/close.png'),
      camera: require('./../assets/light/camera.png'),
      delete: require('./../assets/dark/delete.png'),
      done: require('./../assets/light/done.png'),
      send: require('./../assets/light/send.png'),
      setting: require('./../assets/light/settings.png'),
      options: require('./../assets/light/options.png'),
      play: require('./../assets/light/play.png'),
      post: require('./../assets/light/post.png'),
      search: require('./../assets/light/search.png'),
      comment: require('./../assets/light/message.png'),
      unlike: require('./../assets/light/unlike.png'),
      unmark: require('./../assets/light/unmark.png'),
      home: require('./../assets/light/home.png'),
      message: require('./../assets/light/message.png'),
      activity: require('./../assets/light/activity.png'),
      profile: require('./../assets/light/profile.png'),
      like: require('./../assets/light/like.png'),
      mark: require('./../assets/light/mark.png'),
      selectedDone: require('./../assets/light/selectedDone.png'),
      selectedPost: require('./../assets/light/selectedPost.png'),
      selectedSearch: require('./../assets/light/selectedSearch.png'),
      selectedHome: require('./../assets/light/selectedHome.png'),
      selectedMessage: require('./../assets/light/selectedMessage.png'),
      selectedActivity: require('./../assets/light/selectedActivity.png'),
      selectedProfile: require('./../assets/light/selectedProfile.png'),
    }
  },
];
```