Theme conditions

Theme conditions limit the themes available based on the device and front-end being used.

For example:

  • You can make a mobile theme available only to applications running on mobile devices by adding the "isMobile" condition to a theme or to a theme part used by the theme.
  • You can make a desktop theme available only for applications running on desktop machines by adding the "isDesktop" condition to a theme or to a theme part used by the theme.

Available conditions

Table 1. Available conditions
Condition Description
isDesktop The running platform is a browser that is not a mobile browser; in other words, a browser running on a desktop operating system such as Windows® or Linux.
isTouchDevice The running platform has touch abilities (e.g. mobile device, Microsoft™ Surface).
isMobile The running platform is a browser that is a mobile browser; in other words, a browser running on a mobile device (e.g. Android™, iOS).
isPhone The running platform is a mobile device with a significant size lower than 768px.
isTablet The running platform is a mobile device with a significant size higher or equal than 768px.
isBrowser The running platform is a browser.
isUR The running platform is a Genero front-end running in Universal Rendering mode. Genero front-ends include the Genero Desktop Client (GDC) or the GMA/GMI mobile client.
isAndroid The running platform is Android.
isIOS The running platform is iOS.
isChrome The running browser uses chrome as its rendering engine. These include Google Chrome and Microsoft™ Edge.
isFirefox The running browser is Mozilla Firefox.
isSafari The running browser is Safari.

Usage

Conditions are declared as a JSON property conditions as an array, like "conditions":["isDesktop", "isChrome"].

These conditions can be set at multiple levels:
  • at theme parts, in parts theme.config.json as a property of the root object
  • at theme definitions (in gbc-project-dir/custom.json or in customization-project-dir/custom.json) as a property of the theme definition object.

When multiple conditions are set in theme parts and/or in theme definitions, an AND logic operator will be applied as the compound condition of the resulting theme.

Beware of conflicting conditions

Some conditions conflict, meaning they cannot both be true. For example:
  • A theme cannot be both "isDesktop" and "isMobile".
  • A theme cannot be both "isBrowser" and "isUR".
  • A theme cannot be both "isAndroid" and "isIOS".
When you look at the sum of the conditions for a theme, think about whether they are in conflict. If the theme specifies "isUR", can it also demand a specific browser type? Can a theme ever set a condition for two different browser types? A theme that includes a set of conflicting conditions will never be usable.
For conditions defined at the theme level, it is easy to spot these conflicts. For example, a quick glance at this theme definition shows that two conflicting conditions are being used.
// <gbc-project-dir>/custom.json
{ 
  "themes": [
    // this theme will never be available 
    {
      "name":"impossible-theme",
      "conditions":["isDesktop", "isMobile"]
    }
  ]
}

The full set of conditions for a theme, however, is the combination of conditions set for the theme plus all conditions set by the various theme parts that comprise the theme. You must ensure that the sum of these conditions do not include conditions that are in conflict.