Skip to main content

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:

CustomizationDescriptionRequirements & Recommendations
App iconThe icon for entering the app1024x1024px file (PNG preferred, or high quality JPG) with no alpha-channel (transparency)
App logoThe logo that appears in the app636x226 px (for 3x resolution devices)
Brand colorsSee Colors.

Optional Customizations​

Consider these other customizations to further brand your app.

CustomizationDescriptionRequirements & Recommendations
App barDisplays logo, search bar, notification bell, and three-dot menuChoose transparent or filled, choose condensed (64px) or tall (108px).
Background imageThe background image for the appA 1179 × 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 stylesApplies to all buttonsSee Button Styles.
Card stylesA solid background image for displaying informationChoose paper or glass.
Font familyDefault is InterTo 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 setDefault is Material Symbols and IconsTo customize, send us an SVG libary or Figma link that uses vector icons.
Navigation barThe navigation bar at the footer of the appSee Navigation Bar.
Splash screenUses the background image and app logo.See 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.

button styles

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.

ColorDefault Hex Value
(Light Mode/Dark Mode)		Description
Primary#1A1A1AUsed for a majority of text
Secondary#666666Used for some labels and help text
Disabled#808080Used for disabled text states

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

Icons​

By default, the app’s icon set uses Material Symbols and Icons.

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.

On this page