Using the Theme Plugin

Introduction

The Theme plugin is a default Quick Brick plugin added to all iOS and Android mobile apps.

The function of the QB Theme plugin is

• To migrate SDK keys for assets, fonts, labels, colours out of the platform SDK and have them configurable in a Quick Brick plugin

• To provide base values for assets, colours, fonts and labels out of the box that can then be modified

• Replace the current hard-coded values for an App's design grid with configurable settings for spacing, margins, gutters etc.

• Allow to extend and customise per app the available design tokens without impacting the SDK

• Provide a consistent way for plugins to reuse the app’s design tokens, and have consistent fallbacks when some values are not found

• Make configuration available at run time eliminating the need for the multiple App builds that native Zapp developers are familiar with

Currently supported Theme tokens

The exact tokens supported in the default theme plugin will increase over time. This is what is currently supported:

Spacing Presets

Spacing values can be used to inject values into components/screens so that they have consistent spacing from screen to screen. These values can be overridden in a component plugin if desired, otherwise the components take the values provided by the Theme plugin

Spacing presets are explained in the following illustrations:

Theme Defaults 

Description	Name	Default Value
Screen Padding	screen-padding-top	0
	screen-padding-bottom	48
	screen-padding-left	0
	screen-padding-right	0
Component Margin	component-margin-top	0
	component-margin-bottom	20
Component Padding	component-padding-left	16
	component-padding-right	16
	component-padding-top	0
	component-padding-bottom	0
Component Gutter	component-gutter-vertical	16
	component-gutter-horizontal	13

Background Presets

App background colours can be added here as well as app background images (where applicable - at present only TV apps utilise background images).

Description	Name	Default Value
Color	app-background-color	#161B29
Background Image	app-background-image	Not supported yet

Status Bar Presets

The background colour of the status bar can be altered here along with the ‘theme’ of the status bar contents.

Description	Name	Default Value
Background Color	status-background-color	#161B29
Theme	status-theme	Dark (white status bar contents)

Status bar theme illustration from Apple:

Asset Zip Upload

Other assets can be uploaded at this point so that they are ready on app load (as opposed to loading within context of screen it is used in). These assets would need to be selected within other components in the UI builder. For example, an image overlay used in a cell design could be uploaded here so that it is not downloaded every time a user navigates to a screen when this is used. It will be presented straight away with no lag.

Note: New app builds are required when assets need to be changed.