---
title: "Theming Engine: Overview, Setup & Usage"
description: Set up consistent event branding with EventMobi's Theming Engine. Configure colours, fonts, and styles that automatically apply across your EventMobi products.
---
[Skip to content](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#main-content)
English
Show submenu for translations
[![1589391206704.png\]](https://help.eventmobi.com/hs-fs/hubfs/1589391206704.png?width=40&height=40&name=1589391206704.png)](https://help.eventmobi.com/?hsLang=en)
- [EventMobi Knowledge Base](https://help.eventmobi.com/)
Open main navigation
Close main navigation
- [EventMobi Knowledge Base](https://help.eventmobi.com/)
- English
Show submenu for translations
- [Product Updates & Feedback](https://updates.eventmobi.com/)
[Product Updates & Feedback](https://updates.eventmobi.com/)
What can we help you with?
- There are no suggestions because the search field is empty.
1. [EventMobi Knowledge Base](https://help.eventmobi.com/en/knowledge?hsLang=en)
2. [Event Organizers](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en)
3. [Branding & Design](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#branding-design)
November 6, 2026
# Theming Engine: Overview, Setup & Usage
## The Theming Engine is a centralized branding and design system within EventMobi's Experience Manager. It allows event organizers to define a single Event Theme — including colors, fonts, avatar shapes, and button styles — that automatically cascades across the Event App and other EventMobi products.
### **Table of Contents**
1. ##### [What Is the Theming Engine?](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#what-theming-engine)
2. ##### [Why Use It?](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#why-use-it)
3. ##### [What Does the Theming Engine Control?](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#control)
4. ##### [Where Does the Theme Apply?](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#where-does-the-theme-apply)
5. ##### [How to Set Up Your Event Theme](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#set-up-theme)
6. ##### [The Design Hub: Per-Product Customization](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#per-product-customization)
7. ##### [Previewing Your Theme](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#previewing-theme)
8. ##### [Resetting to Your Event Theme](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#resetting-theme)
9. ##### [Duplicating Events with a Custom Theme](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#duplication)
10. ##### [Frequently Asked Questions](https://help.eventmobi.com/en/knowledge/theming-engine-overview-setup-usage#faq)
---
### What Is the Theming Engine?
The **Theming Engine** is a centralized branding and design system within EventMobi's Experience Manager. It allows event organizers to define a single **Event Theme** — including colours, fonts, avatar shapes, and button styles — that automatically cascades across the Event App and other EventMobi products.
---
### Why Use It?
- **Consistent branding** — one theme configuration automatically applies across all supported products.
- **Faster event setup** — choose a pre-built theme or customize your own in minutes.
- **More control** — override theme elements on a per-product basis when you need flexibility.
- **Future-proof** — theme support is expanding to BadgeOn, LiveDisplay, Registration, Kiosk, and MobiAI.
---
### What Does the Theming Engine Control?
The **Event Theme** covers the following design elements:
| **Element** | **Options** |
| --- | --- |
| **Event Icon** | Your event's icon (moved here from Settings for easier access) |
| **Primary Color** | Any color; used for focal-point elements like primary buttons |
| **Secondary Color** | Accent/complementary color for supporting elements |
| **Font** | Select from the full font library |
| **Avatar Shape** | Square, Rounded, or Circle |
| **Button Style** | Pill, Rounded, or Rectangle |
**🔍 Tip**
Pick your primary colour and EventMobi handles the rest. Lighter and darker variations are generated automatically for different parts of the app, and text colours adjust on their own so nothing ends up hard to read.
---
### Where Does the Theme Apply?
The Event Theme currently applies to the **Event App** (web and mobile).
| **Product** | **Status** |
| --- | --- |
| **Event App** | ✅ Available |
| **Audience Response (MobiAI)** | ✅ Inherits Event Theme automatically on new events |
---
### How to Set Up Your Event Theme
Follow these steps to configure your Event Theme in Experience Manager:
### Step 1 — Navigate to General Settings
1. Log into **Experience Manager**.
2. Open your event.
3. In the left navigation, go to **General Settings**.
4. Locate the **Event Theme** section.
### Step 2 — Set Your Theme
Not sure where to start? EventMobi offers a selection of **pre-built themes** (such as AstroMind, BlueWave, and EventMobi) you can use as a starting point. These are designed for organizers who want a polished result quickly without manually configuring each setting.
#### **How to customize a pre-built theme:**
Default/pre-built themes are **locked for direct editing**. To use one as a customizable starting point:
1. Select the pre-built theme you want to base your design on.
2. Click **"Create New Theme"** in the bottom right corner.
3. This creates an editable copy of that theme — you are not modifying the original.
4. Customize any elements as needed and save.
#### 
**🔍 Tip**
The "Create New Theme" button creates a copy based on the selected default — it does not edit the default itself.
### Step 3 - Primary and Secondary Colours
1. Click the **Primary Colour** swatch.
2. Enter your brand's hex colour code, or use the colour picker.
3. Repeat for **Secondary Colour**.
4. Component tints will be calculated automatically — no additional input is needed.
### Step 4 — Choose Your Font
1. Click the **Font** dropdown.
2. Browse from the drop down list or being typing to search for the desired font from the font library.
3. Select your desired font to apply it across all supported surfaces.
**🔍 Tip**
If your brand uses a licensed font not available in the library (e.g., Helvetica), choose the closest available free alternative.
**
### Step 4 — Select Avatar Shape and Button Style
1. Under **Avatar Shape**, choose from: **Square**, **Rounded**, or **Circle**.
2. Under **Button Style**, choose from: **Pill**, **Rounded**, or **Rectangle**.
### Step 5 — Save Your Theme
Click **Save** to apply the Event Theme. Changes will propagate across the Event App immediately.
If you wish for the Global Event Theme to apply across all EventMobi products by default select 'Yes' under the option at the bottom.
---
### The Design Hub: Per-Product Customization
The **Design Hub** is a dedicated section within the Event App area of Experience Manager. It consolidates all Event App styling settings into one place and allows you to **override** the global Event Theme at the product level.
Where To Find:
1. Open **Experience Manager**.
2. Open your event.
3. In the left navigation, go to **Event App**.
4. Locate the **Design Hub** section.
Inside the Design Hub, you can customize:
- **Content card colour** — with an 'auto' mode that dynamically adjusts text legibility based on the background (image below)
- **Page background colour**
- **Navigation colours** — including top nav, side nav, selected item highlight, and button hover colours independently
- **Custom Menu Title Text**
- **Login page** — including event icon, event name, event date, welcome message, card opacity and a post-event lock screen image, all with live preview
#### 
**⚠️ Please note, t**he **Page Designer** is not yet included in the Design Hub.
#### How Per-Product Overrides Work
The Event Theme sets the **default** for all products. Within the Design Hub, you can adjust individual settings without changing the global theme. This is useful when, for example, your Event App navigation needs a slightly different colour treatment than your base brand palette.
---
### Previewing Your Theme
The Design Hub includes a **live preview panel** so you can see your changes before they go live.
The preview supports:
- Multiple app pages: **Agenda list, Session detail, People list, People profile**, and more
- **Toggle between mobile and desktop views**
#### 
---
### Resetting to Your Event Theme
If your event was set up **before the Theming Engine** was introduced, or if you previously customized colours directly in the Design Hub, those pre-existing settings may take precedence over your global Event Theme.
To clear prior per-product customizations and apply the global Event Theme:
1. Navigate to the **Design Hub** in the Event App section.
2. Locate the **"Reset Event Theme"** button (blue, located below the color settings).
3. Click it to override any previously set colours and apply your Event Theme across the product.
#### 
**💡 Note**
The system intentionally does not auto-override prior customizations when you set a new Event Theme, so this step is important for existing events that are using the new Theming Engine.
---
### Duplicating Events with a Custom Theme
When you **duplicate an event or event space**, your custom Event Theme is automatically copied over to the new event. You do not need to reconfigure branding from scratch for each new event.
This is particularly useful for:
- Recurring events with consistent branding
- Multi-event programs under a single brand
- Creating template events to reuse across a series
---
### Frequently Asked Questions
**Q: Do I need to know CSS to use the Theming Engine?** No. The Theming Engine is designed specifically so that organizers don't need CSS. All styling is handled through native controls in Experience Manager.
**Q: Will my existing custom CSS still work?** The Theming Engine is the new recommended approach and reduces reliance on custom CSS. If you have existing CSS applied, check with your EventMobi contact about how the two interact for your specific setup.
**Q: Can I apply a different theme to different products (e.g., Event App vs. BadgeOn)?** Yes. The Event Theme sets a global default, but you can override individual settings per product within the Design Hub. The same approach will apply as more products receive Theming Engine support.
**Q: Does Audience Response inherit the theme automatically?** Yes — for new events, Audience Response automatically inherits the Event Theme, eliminating the need to manually re-style it each time.
**Q: What happens if I change my theme mid-event?** Changes to the Event Theme apply immediately to the Event App. Test changes in the Design Hub preview before saving if you're concerned about impact during a live event.
**Q: I duplicated an event — do I need to set up my theme again?** No. Custom themes are automatically copied when you duplicate an event or event space.
**Q: How do I customize a pre-built theme?** Select the pre-built theme, then click **"Create New Theme"** at the bottom right. This creates an editable copy — you are not editing the original default template.
**Q: My Design Hub colours aren't updating to match my new Event Theme. Why?** Previously set Design Hub colours take precedence over the Event Theme. Use the **"Reset Event Theme"** button (blue, beneath the colour settings in the Design Hub) to clear prior customizations and apply the global theme.
**Q: Can I upload my logo to automatically generate brand colours?** Not at this time.
**Q: What do primary and secondary colours control?** Think of **primary** as focal-point and accent elements — such as primary buttons and key calls-to-action — and **secondary** as supporting or subsidiary elements. The quickest way to see the effect is to adjust the colours and check the live preview, which updates in real time.
**Q: Is Page Designer included in the Design Hub?** Not at this time.
- [Event Organizers](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#main-content)
- [Experience Manager](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#experience-manager)
- [Attendee Engagement](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#attendee-engagement)
- [Branding & Design](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#branding-design)
- [Creating Profiles & Sessions](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#creating-profiles-sessions)
- [Event Communications](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#event-communications)
- [Onsite Events](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#onsite-events)
- [Virtual Events](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#virtual-events)
- [Core Registration](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#core-registration)
- [Extended Registration](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#extended-registration)
- [Reporting](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#reporting)
- [Sharing Resources](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#sharing-resources)
- [Sponsorship](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#sponsorship)
- [Launch the Event App](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#launch-the-event-app)
- [Event Services](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#event-services)
- [Event Information & Settings](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#event-information-settings)
- [Privacy & Security](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#privacy-security)
- [What's New](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#whats-new)
- [Call For Speakers](https://help.eventmobi.com/en/knowledge/event-organizers?hsLang=en#call-for-speakers)
- [Attendees & Speakers](https://help.eventmobi.com/en/knowledge/attendees-speakers?hsLang=en#main-content)
- [Using the Event App](https://help.eventmobi.com/en/knowledge/attendees-speakers?hsLang=en#using-the-event-app)
- [Access Resources as an Attendee](https://help.eventmobi.com/en/knowledge/attendees-speakers?hsLang=en#access-resources-as-an-attendee)
- [Share Resources as a Speaker](https://help.eventmobi.com/en/knowledge/attendees-speakers?hsLang=en#share-resources-as-a-speaker)
- [Manage Event Communications](https://help.eventmobi.com/en/knowledge/attendees-speakers?hsLang=en#manage-event-communications)
- [Connect With Others at the Event](https://help.eventmobi.com/en/knowledge/attendees-speakers?hsLang=en#connect-with-others-at-the-event)
- [Sponsors & Exhibitors](https://help.eventmobi.com/en/knowledge/sponsors-exhibitors?hsLang=en#main-content)
- [Exhibiting at an Event](https://help.eventmobi.com/en/knowledge/sponsors-exhibitors?hsLang=en#exhibiting-at-an-event)
- [Integration Hub](https://help.eventmobi.com/en/knowledge/integration-hub?hsLang=en#main-content)
- [EventMobi Integration Hub Solution](https://help.eventmobi.com/en/knowledge/integration-hub?hsLang=en#eventmobi-integration-hub-solution)
- [Simplify Your Processes with Automations](https://help.eventmobi.com/en/knowledge/integration-hub?hsLang=en#simplify-your-processes-with-automations)
- [Integrations from EventMobi to your solution](https://help.eventmobi.com/en/knowledge/integration-hub?hsLang=en#integrations-from-eventmobi-to-your-solution)
- [Integrations from your solution to EventMobi](https://help.eventmobi.com/en/knowledge/integration-hub?hsLang=en#integrations-from-your-solution-to-eventmobi)
- [Registration](https://help.eventmobi.com/en/knowledge/registration?hsLang=en#main-content)
- [Content](https://help.eventmobi.com/en/knowledge/registration?hsLang=en#content)
- [Design](https://help.eventmobi.com/en/knowledge/registration?hsLang=en#design)
[.png?width=147&height=34&name=EMI-logo-colour-dark-letters%20(1).png "EMI-logo-colour-dark-letters (1)")](https://www.eventmobi.com/)
© 2025 EventMobi™ A Trademark and Tradename of 5Touch Solutions Inc.
[Change your cookie preferences](https://www.eventmobi.com/cookie-declaration/)