# 2. App theming
## Customizing your app theme
During onboarding, your manager will set a theme that aligns with your brand guidelines. You’ll have the option to request adjustments within the theming system constraints listed below.
Theming options are configured during the app’s build phase and are “hard-coded”—meaning any changes you wish to make must be finalised before this stage. Post-launch theming updates are possible but require an app update and may incur additional costs.
**Please consult with your onboarding manager to ensure your preferences are captured early in the process.**
### App theme checklist
* [x] **Brand guidelines:** Supply your brand guidelines to your onboarding manager
* [x] **Onboarding slides:** Supply the onboarding slide graphics and text to your onboarding manager
* [x] **Theming:** Review your app mockups and confirm any particular theming preferences (within the constraints below) with your onboarding manager
***
## Colour palette
We will theme the app to match the colour scheme of the brand guidelines you supply. The theming system is largely based around a primary colour and an accent colour.
When reviewing the mockups we supply, you can choose to change the primary or accent colour if you like.
***
## App icon
The app icon is used on a devices home screen. Two versions of your app icon must be supplied:
* 1x `PNG` 1024x1024px (iOS)
* 1x `PNG` 512x512px (Android)
You can let the system automatically scale down your two icons to produce all other sizes, or — if you want to customise the appearance of the icon at specific sizes — you can supply multiple versions. See [this article](https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/#specifications) for more information, under the header 'iOS App icon sizes'.
***
## Splash screen
Your app splash screen is shown whilst the app is loading and behind the login/register screen. It should be uncomplicated and fairly plain (many choose just a blank canvas of a single colour hex).
* `PNG` 1290x2796px
It should not feature any text or logos. You can also optionally utilise your app splash screen in the following places:
* Onboarding Slides
* App Header Background
***
## Logos
The app displays a company logo throughout the app.
* `PNG` Fixed Height 600px, Max Width 1000px
By default, the app logo you supply is used everywhere. If required, you can optionally supply an alternative image for the logo which appears in the app header.
***
## Fonts
You can specify a custom font to be used in the app headings. For each font weight, supply:
* Licensed or royalty-free `TTF` or `OTF` file
***
## Onboarding slides
See [3. App configuration](/product/interfaces/white-label-interfaces/loyalty-mobile-app/loyalty-mobile-app-setup/3.-app-configuration.md#first-launch-screen) for more information.
You can show up to 5 onboarding slides to provide users with information about your loyalty program's features and benefits. When your slides come to an end, your logo is shown on your splash screen with a 'Get Started' button. You can choose which images and text are displayed.
See [#onboarding-slides-1](#onboarding-slides-1 "mention") for a preview.
Supply **one of each *****per slide*****:**
* Background colour or background image
* You can choose to have a static colour background **per slide**, OR
* your splash screen image as the background for **every slide**
* Text colour
* Title text (always shown at the top)
* Central image (always shown in the middle - must be a Transparent `PNG` Max \~150kb)
* Description text (always shows at bottom)
{% hint style="danger" %}
**Do NOT design the entire slide as a graphic. You do not need to supply the entire slide as a graphic. You only need to provide the assets listed above. Each slide is generated by the app automatically from the supplied assets.**
Additionally, the layout of the onboarding slides is fixed as shown. You cannot re-order the items on the slide or move them around.
{% endhint %}
***
## Empty wallet graphic
You can optionally choose to hide or show a different ‘empty wallet' graphic on the Wallet screen. This only applies if you are utilising the Wallet screen as opposed to the Activity screen (see App Configuration section above).
* `PNG` Transparent
***
## Asset previews
{% tabs %}
{% tab title="App icon" %}
| Asset Standalone | Asset Preview In-situ |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| 
| 
|
| {% endtab %} | |
{% tab title="Splash screen" %}
| Asset Standalone | Asset Preview In-situ | Asset Preview In-Situ 2 | Asset Preview In-Situ 3 |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| | | | You can optionally show your splash screen behind your app header. If not, your primary theme colour will be used. |
| 
| 
| 
| 
|
| {% endtab %} | | | |
{% tab title="Logo" %}
| Asset Standalone | Asset Preview In-situ | Asset Preview In-situ 2 |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| 
| 
| 
|
| {% endtab %} | | |
{% tab title="Onboarding slides" %}
{% hint style="danger" %}
**Remember: do NOT supply the entire slide as an image. The slide is rendered in app using the central image you supply, along with the title and descriptor text.**
{% endhint %}
| Asset Standalone | Asset Preview In-situ | Asset Preview In-situ 2 |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | -------------------------------- |
| 
| 
|  |
| {% endtab %} | | |
{% tab title="Empty wallet" %}
{% hint style="warning" %}
**The text 'Nothing yet, get collecting!' is *****not***** a part of the image. It is rendered in-app.**
{% endhint %}
| Asset Standalone | Asset Preview In-situ |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| 
| 
|
| {% endtab %} | |
| {% endtabs %} | |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://kbase.whitelabel-loyalty.com/product/interfaces/white-label-interfaces/loyalty-mobile-app/loyalty-mobile-app-setup/2.-app-theming.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.