Theme conditions
Theme conditions allow you to filter applicable themes for the user. For example, you can make mobile themes only applicable on mobile devices and desktop themes only applicable on desktop browsers.
Available conditions
Condition | Description |
---|---|
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 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 (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"]
.
- 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! If a theme gets, for example "isDesktop" and "isMobile" conditions, this theme won't be usable in any case. The same conflict would exist between "isBrowser" and "isUR".
// <gbc-project-dir>/custom.json
{
"themes": [
// this theme will never be available
{
"name":"impossible-theme",
"conditions":["isDesktop", "isMobile"]
}
]
}