How to build a new theme?
Using Theme Builder
The Theme Builder is where you build the overall color scheme for the App. This includes primary and secondary colors, icon background colors, choosing the grid or highlights menu view, and the choice of multi color icons. This article will cover how to navigate to the Theme Builder, as well as each of these functions.
To navigate to the Theme Builder, Click on the App Builder icon from the Home Screen in the Dashboard, or the App Builder tab in the left hand menu.
The App Builder screen will appear. To navigate to the Theme Builder, click on that tab.
The screen below will appear.
Colors
This is where you choose your App's color scheme.
Primary
The Primary color is the color displayed most frequently across your app’s screens and components. The background color for major parts of the app (toolbars, tab bars, etc).
For example, the Light Blue at the top and bottom of this App are the Primary Color
If I edited this to a bright red, here's how that would present within the App:
Colors in the theme builder are changed using hex codes. Every color has a unique hex code that can be assigned to it, so that the perfect color is chosen every time to match existing branding.
You can also choose a different primary color to use in dark mode than in light mode. Be sure to choose a secondary color that complements your primary color, and that could work well as a primary color for your dark mode.
Icon Background
This is set to Transparent/None as shown below by default.
This is the color of the icon background in content pages. If it is not set, there will be no background for the icons.
When I change the Icon Background to the color grey as shown below, look how it affects the App:
Original/Default Icon Background VS Grey Icon Background
Settings
This is where you can edit the layout and the font of your App.
Home Type
This edits your App layout and is set to "Grid Menu Horizontal" by default.
If you click the drop down you will see the other options:
Here's how "Grid Menu Horizontal" presents in the App:
Notice the 2 dots at the bottom of the App indicating you will need to swipe horizontally to see the next page.
Here's how "Grid Menu Vertical" presents in the App:
Notice how the 2 dots disappear. You can swipe vertically to see the entire App.
Here's how "Highlights" presents in the App:
Notice how this removes the Grid Menu entirely and creates a reel of highlights. This generates from items in the Newsfeed.
Font Family
If you type in the font you are looking for you can edit it here.
Multi-Color Icons
There is now a new checkbox in the new theme builder “Use multi-color icons”. If this is checked, the icons uploaded will not have any tint so the icon will be unchanged from whatever is uploaded. This will allow for multicolor icons like below. For consistency in app appearance, we recommend if enabling multi-color icons, you chose multi-color icons across the entire app so there isn't a mix of wire-frame, and multi-color.
