Theme
App Configuration / Theme — Production view
Theme lets you control the branding and visual identity of your tenant experience across mobile and web. Set your welcome card image, hero banner, button colors, and app-wide primary and secondary colors — all scoped to specific buildings.
Overview
Navigate to HqO Admin > App Configuration > Theme to configure your property's visual appearance.
Theme settings are split into two sections:
- Home screen configurations — settings that affect the welcome card and home screen design (mobile app)
- App configurations — settings that affect the entire app experience across mobile and web
Click Save at the top of the page to apply your changes.
⚠️ Note: Theme settings are scoped to the currently selected building. Many settings include an option to apply them across multiple buildings simultaneously.
Home screen configurations
Logo overlay
| Setting | Description |
|---|---|
| Show logo overlay on welcome card | When checked, the building logo appears centered on top of the welcome card image. |
Welcome card title
Choose how the title appears on the welcome card:
| Option | Description |
|---|---|
| Text | Display a text title. Enter up to 24 characters. Defaults to the building name. |
| Image | Upload a custom image to use as the title instead of text. |
Welcome card background
Select the background style for the welcome card:
| Option | Description |
|---|---|
| Image | Upload a custom image. Recommended size: 750 × 480 px (PNG or JPEG). Include Image alt text for accessibility. |
| Solid color | Fill the welcome card with a single solid color. |
| Gradient | Apply a gradient background. |
| White background | Use a plain white background. |
Hero image
The hero image appears at the top of the home screen in the web app.
| Option | Description |
|---|---|
| Image | Upload a banner image. Recommended size: 1280 × 196 px (PNG or JPEG). Include Hero image alt text for accessibility. |
| Solid color | Use a solid color as the hero banner. |
| Gradient | Apply a gradient to the hero area. |
Button & icon color
Configure the color of utility buttons and icons on the home screen:
| Field | Description |
|---|---|
| Button color | Hex code for the button background. |
| Icon color | Hex code for icons on buttons. Editable only when Button color is #FFFFFF. |
Button shape — Choose the shape of utility buttons on the home screen:
| Option | Description |
|---|---|
| Circles | Round buttons — best when you have 4 or more buttons and want to emphasize icons over labels. |
Check Apply this utility button shape to multiple buildings to apply the same shape across a selection of buildings.
App configurations
Primary & secondary colors
These colors apply to the entire app (both mobile and web when web is activated).
| Field | Description |
|---|---|
| Primary color | Hex code used for key action areas — call-to-action buttons and primary UI elements. |
| Secondary color | Hex code used for secondary action areas — external links and supporting UI elements. |
Check Apply these primary and secondary colors to multiple buildings to propagate color settings across multiple properties at once.
Core workflows
Updating the welcome card image
- In the Welcome card background section, select Image.
- Click Upload image or Choose File to upload a PNG or JPEG (recommended: 750 × 480 px).
- Enter Image alt text describing the image.
- Click Save.
Changing the primary color
- Scroll to App configurations > Primary & secondary colors.
- Enter a new hex code in the Primary color field.
- Optionally check Apply these primary and secondary colors to multiple buildings and select which buildings to update.
- Click Save.
Applying settings across multiple buildings
- Edit the desired setting (button shape, primary color, etc.).
- Check the Apply to multiple buildings option below that setting.
- Select the buildings to include from the multi-select field.
- Click Save.
FAQ
Do theme changes apply immediately? Yes. Changes take effect for users as soon as you click Save and the app refreshes.
Can different buildings have different themes? Yes. Each building maintains its own theme configuration. Use the building selector in the top bar to switch between properties. Settings with the "apply to multiple buildings" option let you push a single value to many buildings at once.
What is the "Icon color" field used for?
Icon color controls the color of icons placed on utility buttons. It is only editable when Button color is set to pure white (#FFFFFF) — in all other cases, HqO automatically sets a contrasting icon color.
What size should my welcome card image be? The recommended size is 750 × 480 px. Larger images are accepted but will be cropped or scaled to fit.
Need help?
Contact your HqO account team or email appsupport@hqo.co.