Theme conditions

Overview

Theme conditions allow you to filter applicable themes for the user. Fir example, you can make mobile themes only applicable on mobile devices and desktop themes only applicable on desktop browsers.

Available conditions

Possible conditions are:

isDesktop The running platform is a desktop (e.g. Windows, Linux).
isTouchDevice The running platform has touch abilities (e.g. mobile device, Microsoft Surface).
isMobile The running platform is a mobile (e.g. Android, IOS).
isPhone The running platform is a mobile with a significant size lower than 768px.
isTablet The running platform is a mobile 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 (the GDC desktop client or the GMA/GMI mobile client).
isAndroid The running platform is Android.
isIOS The running platform is IOS.
isChrome The running browser is Google Chrome.
isEdge The running browser is Microsoft Edge.
isFirefox The running browser is Mozilla Firefox.
isIE The running browser is Microsoft Internet Explorer.
isOpera The running browser is Opera.
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/config.json`) as a property 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! If a theme gets, for example "isDesktop" and "isMobile" conditions, this theme won't be usable in any case. Same conflict between "isBrowser" and "isUR".

// <gbc-project-dir>/custom.json
{ 
  "themes": [
    // this theme will never be available 
    {
      "name":"impossible-theme",
      "conditions":["isDesktop", "isMobile"]
    }
  ]
}