Theme

The Theme tab allows you to customize the global theme colors, toolbar settings, and image settings you want to use for the global style of your app. These settings can be inherited or overridden on a parent or per-activity basis (see each activity's settings for available customization).

 Global Color Settings

Note: Some colors do not affect activity content containing HTML such as the Website, Custom Page, HTML Archive, or RSS feed details. Their colors are controlled via HTML.

Primary Color
The primary color you want to use for your application. The primary color is generally your app's "branding" color. It is used for toolbar backgrounds and to represent activities when images aren't provided.

Accent Color
The accent color you want to use for your application. The accent color is used for parts of the UI such as buttons/gadgets and hyperlinks (where applicable).

Body Style
This setting controls what colors are used in the "body" of activity content, such as its background and text color.

• Material Light - Use the standard Material colors for a body with a light background.
• Material Dark - Use the standard Material colors for a body with a dark background.
• Custom - Enables the Custom Body Colors settings, allowing you to customize the Window Color, Background Color and Text Color.

Custom Body Colors
The following settings are available when "Custom" Body Style is selected:

Window Color
The color you want to use for the bottom-most window background (ie. the area 'behind' cards).

Background Color
The color you want to use for the background of areas where text may be shown (ie. the card background color).

Text Color
The color you want to use for all body text, including primary and secondary text. Opacity is applied to different text levels automatically per material guidelines.

Global Image Settings

This section allows you to provide global image settings that can be inherited in your app.

Background Image
The background image is an optional image that can be shown behind the dashboard/activity's content. Background images are only supported on some activity types.

• None - Don't use a background image.
• Custom - Enables the Custom Background Image Settings section of settings allowing you to upload a global background image.

Custom Background Image Settings
The following settings are available when "Custom" Background Image is selected:

Upload a Background Image
Allows you to upload a background image. Click the "Browse" button to select an image file from your computer. The selected image should be a maximum of 1440x1440, 1.5 MB, JPG or PNG format.

Background Image Effect
Applies a filter to the background image when it is shown in the app, changing the color of the image automatically. This can help improve the contrast of text drawn over the background image -- for example, darkening the background to improve the readibility of brightly colored text.

• None - No filter (show the original image unchanged).
• Darken - Darken the image by 40%, i.e. scale the original color into [0-153] instead of [0-255].
• Lighten - Lighten the image by 60%, i.e. scale the original color into [153-255] instead of [0-255].
• Midnight - Darken + Greyscale.
• Twilight - Lighten + Greyscale.
• Greyscale - Convert all colors to shades of grey, i.e. desaturate the image.
• Tint - Modify the image so it takes on the current primary/automatic toolbar color.

Feature Image
A feature image is an optional image that can be shown as the background of an activity's toolbar or at the top of the content (outside of the toolbar). It can also be used to represent the activity on a dashboard. These settings allow you to provide a global feature image to inherit in your app.

• None - Don't use a global feature image.
• Custom - Use a global feature image. Selecting this option enables the Custom Feature Image Settings section containing the settings to use for a global feature image.

Custom Feature Image Settings
The following settings are available when "Custom" is selected as the Feature Image.

Aspect Ratio
The aspect ratio of the area where the feature image will be shown. This setting controls the initial height of the toolbar when using an Expanded toolbar style, or the height of the feature image outside a Standard toolbar.

Upload a Feature Image
Allows you to upload a global feature image. Click the "Browse" button to select an image file from your computer. The selected image should be a maximum of 1440x1440, 1.5 MB, JPG or PNG format.

Wide Image
The wide image is another variation of a feature image that is designed to be shown in an area with an aspect ratio of 16:9. If provided, this image will be used when an item style requests it (e.g. for a Card style).

• None - Don't use a wide image.
• Use feature image - Use the provided Feature image when a wide image is requested in an item style.
• Custom - Use a global wide image. Selecting this option enables the Custom Wide Image Settings section containing the settings to use for a global wide image.

Custom Wide Image Settings
The following settings are available when "Custom" is selected as the Wide Image:

Upload a Wide Image
Allows you to upload a global wide image. Click the "Browse" button to select an image file from your computer. The selected image should be a maximum of 1440x1440, 1.5 MB, JPG or PNG format.

Square Image
The square image is another variation of a feature image that is designed to be shown in an area that is square. If provided, this image will be used when an item style requests it (e.g. for a Grid style).

• None - Don't use a square image.
• Use wide image, cropped - Use the provided Wide image when a square image is needed in an item style.
• Use feature image, cropped - Use the provided Feature image when a square image is needed in an item style.
• Custom - Use a custom square image. Selecting this option enables the Custom Square Image Settings.

Custom Square Image Settings

Upload a Square Image
Allows you to upload a global square image (1:1 aspect ratio recommended). Click the "Browse" button to select an image file from your computer. The selected image should be a maximum of 1440x1440, 1.5 MB, JPG or PNG format.

Global Toolbar Settings

Toolbar Style

• Standard - A standard toolbar with a solid color background. If a feature image is enabled, it will appear "outside" the toolbar, and will scroll beneath it as the activity contents are scrolled.
• Compact - A compact toolbar. A compact toolbar is similar to the standard toolbar, but with support for showing the feature image as the toolbar background, appearing "inside" the toolbar.
• Expanded - A collapsible toolbar that starts out expanded. If a feature image is enabled, it will appear within the expanded toolbar, and collapse along with it.

Scroll Behavior

• Always visible - Keep the toolbar visible when scrolling activity content.
• Auto hiding - Automatically hide the toolbar when scrolling activity content.

Show Advanced Settings
Shows or hides the Advanced Toolbar Settings for the selected style containing settings such as the Background Type, Background Color, Background Color Preference and Primary Toolbar Text/Icon Color.

Advanced Toolbar Settings

Background Type
This setting is available when "Compact" or "Expanded" Toolbar Style is selected.

• Color - Use a solid color for the toolbar background.
• Feature Image - Use the activity's feature image as the toolbar background.
• Feature image morphing to color (Expanded Toolbar style only) - Morph the activity's feature image into a solid color as it collapses.

Background Color

• Primary - Use the global Primary color as the background.
• Automatic - Automatically select a background color based on the provided Feature Image.
• Nearest material primary - Automatically select a background color based on the provided Feature Image, but use the nearest primary color from the material palette (subset of recommended primary colors).

Background Color Preference
This setting is available when "Automatic" or "Nearest Material Primary" Background Color is selected.

Automatic - Automatically select a light or dark color based on the overall "darkness" of the provided Feature Image.

• Light - Use a "light" color for the background. If no light color is available, the primary color will be used.
• Dark - Use a "dark" color for the background. If no dark color is available, the primary color will be used.

Primary Toolbar Text/Icon Color

• Automatic - Automatically select a color for the toolbar text and action icons based on the primary color.
• Custom - Enables the Custom Toolbar Text/Icon Color setting allowing you to choose a custom color for the toolbar text and icons.

Custom Toolbar Text/Icon Color
The color you want to use for the toolbar text and icons. This setting is available when "Custom" is selected as the Primary Toolbar Text/Icon Color. This setting is ignored unless Background Color is set to "Primary."