dojox/mobile/deviceTheme (version 1.10)

Automatic theme loader.

This module detects the user agent of the browser and loads the appropriate theme files. It can be enabled by simply including the dojox/mobile/deviceTheme script in your application as follows:

<script src="dojox/mobile/deviceTheme.js"></script>
<script src="dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>

Using the script tag as above is the recommended way to load the deviceTheme. Trying to load it using the AMD loader can lead to styles being applied too late, because the loading of the theme files would be performed asynchronously by the browser, so you could not assume that the loading has been completed when your widgets are initialized. However, loading deviceTheme using the script tag has the drawback that deviceTheme.js cannot be included in a build.

You can also pass an additional query parameter string: theme={theme id} to force a specific theme through the browser URL input. The available theme ids are Android, Holodark (theme introduced in Android 3.0), BlackBerry, Custom, iPhone, and iPad. The theme names are case-sensitive. If the given id does not match, the iPhone theme is used.

http://your.server.com/yourapp.html // automatic detection
http://your.server.com/yourapp.html?theme=Android // forces Android theme
http://your.server.com/yourapp.html?theme=Holodark // forces Holodark theme
http://your.server.com/yourapp.html?theme=BlackBerry // forces Blackberry theme
http://your.server.com/yourapp.html?theme=Custom // forces Custom theme
http://your.server.com/yourapp.html?theme=iPhone // forces iPhone theme
http://your.server.com/yourapp.html?theme=iPad // forces iPad theme
http://your.server.com/yourapp.html?theme=ios7 // forces iOS 7 theme

To simulate a particular device from the application code, the user agent can be forced by setting dojoConfig.mblUserAgent as follows:

<script src="dojox/mobile/deviceTheme.js" data-dojo-config="mblUserAgent: 'Holodark'"></script>
<script src="dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>

By default, an all-in-one theme file (e.g. themes/iphone/iphone.css) is loaded. The all-in-one theme files contain style sheets for all the dojox/mobile widgets regardless of whether they are used in your application or not.

If you want to choose what theme files to load, you can specify them via dojoConfig or data-dojo-config as shown in the following example:

<script src="dojox/mobile/deviceTheme.js"
    data-dojo-config="mblThemeFiles:['base','Button']"></script>
<script src="dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>

In the case of this example, if iphone is detected, for example, the following files will be loaded:

dojox/mobile/themes/iphone/base.css
dojox/mobile/themes/iphone/Button.css

If you want to load style sheets for your own custom widgets, you can specify a package name along with a theme file name in an array.

['base',['com.acme','MyWidget']]

In this case, the following files will be loaded.

dojox/mobile/themes/iphone/base.css
com/acme/themes/iphone/MyWidget.css

If you specify '@theme' as a theme file name, it will be replaced with the theme folder name (e.g. 'iphone'). For example,

['@theme',['com.acme','MyWidget']]

will load the following files:

dojox/mobile/themes/iphone/iphone.css
com/acme/themes/iphone/MyWidget.css