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.

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.

Recent Discussions

24 Jul, 2017 06:57 PM
24 Jul, 2017 12:26 PM
24 Jul, 2017 12:03 PM
22 Jul, 2017 01:52 PM
21 Jul, 2017 12:05 PM