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

# Theme (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: gradientColor,
    gradientTransparentColors: gradientTransparent,
    container: {
      backgroundColor: Black,
      headerTextColor: White,
    },
    primaryColor: White,
    secondaryColor: GRAY,
    subSecondaryColor: LIGHTGRAY,
    subPrimaryColor: LIGHTBLACK2,
    onlineColor: ONLINE,
    infoColor: RED,
    chatTheme: {
      backgroundColor: Black,
      left: {
        wrapper: {
          backgroundColor: LIGHTGRAY
        },
        text: {
          color: Black
        }
      },
      right: {
        wrapper: {
          backgroundColor: ONLINE
        },
        text: {
          color: Black
        }
      },
    }
  },
  {
    key: 'LIGHT',
    gradientColors: gradientColor,
    gradientTransparentColors: gradientTransparent,
    container: {
      backgroundColor: White,
      headerTextColor: Black,
    },
    primaryColor: Black,
    secondaryColor: GRAY,
    subSecondaryColor: LIGHTGRAY,
    subPrimaryColor: LIGHTGRAY,
    onlineColor: ONLINE,
    infoColor: RED,
    chatTheme: {
      backgroundColor: Black,
      left: {
        wrapper: {
          backgroundColor: LIGHTGRAY
        },
        text: {
          color: Black
        }
      },
      right: {
        wrapper: {
          backgroundColor: Black
        },
        text: {
          color: White
        }
      },
    }
  },
];
```