> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mx.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Theme Your Mobile App
You can brand the MX mobile app to match the look and feel of your institution.
In this guide, we'll cover:
* Required customizations (like the app's logo)
* Optional customization options with examples to inspire your design
## Themes
Your users can choose from multiple themes within the app, each with a light and dark mode. For example, your app could have a Default theme, a Space theme, and a Sports theme. By default, the app includes one theme that you'll customize to match your institution's branding. Light and dark modes respect the user's device settings.
## Global Customizations
Some customizations are set in the default theme and apply to all other themes:
* App Icon
* App Logo
* Splash Screen
* Error Colors
* Info Colors
* Success Colors
## Required Customizations
The default theme sets some customizations which apply to all other themes.
You must specify the following:
| Customization | Description | Requirements & Recommendations |
| :------------ | :-------------------------------------------------------------- | :--------------------------------------------------------------------------------------------- |
| App icon | The icon for entering the app | 1024px X 1024px file (PNG preferred, or high quality JPG) with no alpha-channel (transparency) |
| App logo | The logo that appears in the app | 636px X 226px (for 3x resolution devices) |
| Brand colors | See [Colors](/products/experience/mobile/setup/theming#colors). | |
## Optional Customizations
Consider these other customizations to further brand your app.
| Customization | Description | Requirements & Recommendations |
| :--------------- | :---------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| App bar | Displays logo, search bar, notification bell, and three-dot menu | Choose `transparent` or `filled`, choose `condensed` (64px) or `tall` (108px). |
| Background image | The background image for the app | A 1179px X 2556 px PNG or high-quality JPEG. Make sure the image isn't blurry or pixelated at this size. If you want to provide separate versions for light and dark mode, label them `background-light.png` and `background-dark.png`. Background images may be **slightly stretched or cropped** depending on users' device size and aspect ratio. |
| Button styles | Applies to all buttons | See [Button Styles](/products/experience/mobile/setup/theming#button-styles). |
| Card styles | A solid background image for displaying information | Choose **paper** or **glass**. |
| Font family | Default is Inter | To customize, send us an OpenType collection (`.ttc`), TrueType (`.ttf`), or OpenType (`.otf`) file. You must either send an open source file or a font with the license permitting you to use it. |
| Icon set | Default is [Material Symbols and Icons](https://fonts.google.com/icons) | To customize, send us an SVG library or Figma link that uses vector icons. |
| Navigation bar | The navigation bar at the footer of the app | See [Navigation Bar](/products/experience/mobile/setup/theming#navigation-bar). |
| Splash screen | Uses the background image and app logo. | See [Splash Screen](/products/experience/mobile/setup/theming#splash-screen). |
## Button Styles
You can change the following attributes for the buttons that appear in the mobile app:
* Background color
* Corner radius
* Label color
You can pick from one of the following values to use for the corner radius of all buttons in the app.
## Colors
To brand the app to your institution, you can customize the app's colors:
* Light mode background
* Dark mode background
* Brand
* Text
* Error
* Warning
* Info (applies to dark mode and light mode)
* Success (applies to dark mode and light mode)
The default app colors are all ADA compliant. You'll need to verify that the colors you choose to override the defaults meet accessibility standards.
| Color | Default Hex Value (Light Mode/Dark Mode) | Description |
| :-------- | :--------------------------------------- | :--------------------------------- |
| Primary | `#1A1A1A` | Used for a majority of text |
| Secondary | `#666666` | Used for some labels and help text |
| Disabled | `#808080` | Used for disabled text states |
| Color | Default Hex Value (Light Mode/Dark Mode) | Description |
| :-------------- | :--------------------------------------- | :------------------------------------------------------------------------- |
| Main | `#2C64EF` | Used for primary buttons, text links, active filter pills, and active tabs |
| Dark | `#022272` | Used in some cases for pressed states of buttons and links |
| Light | `#F1F5FF` | Used in some places for backgrounds (like in the navigation bar) |
| Contrast Text | `#FFFFFF` | |
| Selected | `#2C64EF` (8%) | Used for selected states |
| Focus | `#2C64EF` (12%) | Used for focus states |
| Pressed | `#E2E8FC` | Used for pressed states |
| Outlined Border | `#2C64EF` | Used for enabled states |
We recommend you only change these colors to different shades of red.
| Color | Default Hex Value (Light Mode/Dark Mode) | Description |
| :------------ | :--------------------------------------- | :--------------------------------------------------------------- |
| Main | `#E32727` | Main error color |
| Dark | `#8C0E0E` | Used in some cases for pressed states of buttons and links |
| Light | `#FFDFE1` | Used in some places for backgrounds (like in the navigation bar) |
| Contrast Text | `#FFFFFF` | |
We recommend you only change these colors to different shades of yellow.
| Color | Default Hex Value (Light Mode/Dark Mode) | Description |
| :------------ | :--------------------------------------- | :--------------------------------------------------------------- |
| Main | `#FFB70D` | Main warning color |
| Dark | `#963D01` | Used in some cases for pressed states of buttons and links |
| Light | `#FFEEC5` | Used in some places for backgrounds (like in the navigation bar) |
| Contrast Text | `#FFFFFF` | |
We recommend you only change these colors to different shades of blue.
| Color | Default Hex Value (Light Mode/Dark Mode) | Description |
| :------------ | :--------------------------------------- | :--------------------------------------------------------------- |
| Main | `#2C64EF` | Main info color |
| Dark | `#0130A6` | Used in some cases for pressed states of buttons and links |
| Light | `#9EB5FF` | Used in some places for backgrounds (like in the navigation bar) |
| Contrast Text | `#FFFFFF` | |
We recommend you only change these colors to different shades of green.
| Color | Default Hex Value (Light Mode/Dark Mode) | Description |
| :------------ | :--------------------------------------- | :--------------------------------------------------------------- |
| Main | `#12875E` | Main success color |
| Dark | `#00432C` | Used in some cases for pressed states of buttons and links |
| Light | `#D9FDEA` | Used in some places for backgrounds (like in the navigation bar) |
| Contrast Text | `#FFFFFF` | |
## Mode Backgrounds
Some components in a theme can have varying levels of elevation: 0, 1, 8, or 16. 0 represents no shadow, while 16 represents a significant shadow.
You can change the background color used for each elevation (if it's available for that element type). For example, if you set the light mode background color for elevation level 1 to `#F2F2F2`, then any component that has a elevation of level 1 will have the `#F2F2F2` background color. The default for light mode is white (`#FFFFFF`). If you change this, use another light shade.
* Default `#FFFFFF`
* Elevation 0 `#FFFFFF`
* Elevation 1 `#FFFFFF`
* Elevation 8 `#FFFFF`
* Elevation 16 `#FFFFF`
* Default `#000000`
* Elevation 0 `#000000`
* Elevation 1 `#232323`
* Elevation 8 `#404040`
* Elevation 16 `#383838`
## Icons
By default, the app's icon set uses [Material Symbols and Icons](https://fonts.google.com/icons).
## Navigation Bar
The navigation bar that appears at the lowest edge of the app has the following customization options:
* Border radius
* Background style (paper or custom)
* Shadow or no shadow
* Height
* Margins & padding
Icons within the navbar have the following customization options:
* Border radius
* Color
* Font
* Icon
* Height
* Margins & padding
## Splash Screen
You can customize the splash screen through the background image and logo.