This tutorial will go through individual colors as seen in the Customize theme section of the Builder. For example’s sake, each color will be set to a notable blue color, as to be easily noticeable in the screenshots.
Basic colors
Featured color – main color of the app
Used throughout the app for large patches. Most notable in Featured layouts, for example in the News and News RSS extension, the Featured Grid layout.
Background color – overall app background color
This is color of the background visible behind all of the components of a given screen. The best example of this would be the color seen behind individual list items in a card list or icon grid layout.
Paper background color – most individual screen components and placeholders
When an image is missing from a layout which requires one, this will be the placeholder color. If an image has transparency, this color will be the background color behind the image, but with an inverted brightness (i.e. if it’s a bright blue color, it’ll be dark behind an image).
Furthermore, this is also used as the background color for most individual screen components, such as cards, tiles or rows.
Shadow color
Serves as a “second border” for card components, as well as the border color for certain dropdown menus.
Navigation bar (header)
Notch status bar color
This color is only present on devices with a notch (e.g. iPhone X, Xr, etc.) and only when there is a navigation bar image set in the Main Navigation – Navigation Bar settings. In the example image below, the navigation bar background image is a simple, solid yellow image.
Title
These settings will allow you to customize the text on the center of the Navigation bar on any layout other than featured layouts. On featured type layouts, the color of the title is determined by a separate setting discussed later in this tutorial.
Icons color
The color setting for icons found in the navigation bar on any layout other than featured layouts. On featured type layouts, the color of the icons is determined by a separate setting discussed later in this tutorial.
Title color for featured layouts
This determines the color of the text on the center of the Navigation bar on featured layouts.
Icons color for featured layouts
The color setting for icons found in the navigation bar on featured layouts.
Background color
The background color of the Navigation bar for non-featured layouts. On featured layouts, the background color is inherited from Basic colors – Featured color.
Header bottom border color
This determines the color of the bottom border of the Navigation bar, where it’s present.
Tab Bar and Drawer layouts
These settings adjust the styling for the two listed Main navigation layouts.
Background color
This determines the background color of the Drawer’s menu and the Tab Bar footer. If the drawer isn’t full (as seen on the screenshot) the rest of the drawer menu will have a background color set as Basic colors – Paper color.
Item text and icons color
“Item” refers to a navigation item, either Tab Bar tabs or Drawer menu items. This setting changes the text color and tints any .png files into the same color. I.e., if you upload a PNG format icon, it will be tinted into this color. You can avoid this by using another format.
Tab Bar border color
The color of the top of the Tab Bar footer.
Item background color
“Item” refers to a navigation item, either Tab Bar tabs or Drawer menu items. This setting changes the background color of all but the selected items.
Selected item text and icon color
“Item” refers to a navigation item, either Tab Bar tabs or Drawer menu items. This setting changes the text color and tints any .png files into the same color. I.e., if you upload a PNG format icon, it will be tinted into this color. You can avoid this by using another format.
Selected item background color
“Item” refers to a navigation item, either Tab Bar tabs or Drawer menu items. This setting changes the background color of the selected item.
Tab Bar selected item border color
This setting changes the border color of the selected item. On devices with the home indicator (e.g. iPhone X), the highlighted border color will be on the top of the Tab Bar, on other devices, it’ll be on the bottom.
List, Card list, Icon grid, and Tile grid layouts
These settings adjust the styling for the listed navigation layouts both as Main navigation and Sub-navigation layouts.
Item text and ‘.png’ icon color
“Item” refers to a list item, tile grid card or icon in the icon grid. This setting changes the text color and tints any .png files into the same color. I.e., if you upload a PNG format icon, it will be tinted into this color. You can avoid this by using another format.
Item background color
“Item” refers to a list item, tile grid card or icon in the icon grid. This setting changes the background color of the item. It’s also the placeholder color in Card list and Tile grid items, as well as the background color in case of a transparent image in the Card list and Tile grid items.
List layout border color
This setting determines the color of the border between List layout items.
Typography
Heading
Headings aren’t used throughout the default extensions but are still listed here in case custom extensions utilize the Heading component in their code.
Title
The title component is used most often on details screens when showing the title/name property of the CMS entry. As seen in the example of this About screen.
Subtitle
The subtitle component is used primarily for list item and grid item titles, as well as for displaying certain details such as, for example, the “Current price” of a product in the Products screen.
Caption
The caption component is used for the short description of list or grid item, as well as for displaying section headings in details screens such as, for example, the “Open hours” on an About screen.
Text
The text component is the general text found on details screens. Any long form text will be styled as set here.
Buttons
Buttons have two discernible styles; Primary and Secondary. Secondary styles usually implement a dark background color with lighter borders and text. This secondary style is mostly used in the Noir theme flavor.
Button text
The primary text settings will apply to both the Primary and Secondary styled buttons, however, the secondary button color is determined in a separate setting – “Secondary button text color”.
Primary and secondary background color
The background color of the button.
Primary and secondary border color
The border color of the button.
Overlays
Overlays are used to add a (usually) transparent layer over a component in order to make nested text more readable. The most common example of this is text nested inside of an image as seen in most details screens.
Default overlay color
“Default” indicates the overlay isn’t an image overlay. An example can be found in the Videos extension, the video play icon background is a default overlay.
Default overlay text and icon color
This setting determines the color of any nested text of a default overlay (one that isn’t an image overlay). An example of this can be found in the Videos extension, in the video play icon, the “Play” triangle is
Image overlay color
Any image with text over it has an overlay. This setting determines it’s color and transparency.
Image overlay text and icon color
The color of text or icons over an image is determined by this setting.
Miscellaneous
Line color
This is the color of the line found between list items in content screens, not to be confused with the List (sub)navigation layout. This is also the color of the empty part of the loyalty horseshoe progress bar.
Loyalty horseshoe, notification dots and page indicators
As the setting name itself explains, it determines the color of the loyalty horseshoe progress bar (filled portion, the empty portion is determined by the Line color setting), the color of notification dots as seen in the notification center screen and page indicators for horizontal pagers.
Section header background color
Section headers are found on details screens with multiple text blocks, such as the About screen, with it’s Location and Open Hours sections.
