delite/theme!

Delite/theme! is a high level plugin for loading a CSS file based on the theme of the page.

The plugin is similar to the CSS loader, but will substitute {{theme}} with the page's theme. It will also load the common css file for the theme, delite/themes/{{theme}}/common.css, even if no resource is provided (like in delite/theme!).

To load delite/theme!./a/b/{{theme}}/file1.css, the requirements are that:

• there is an a/b directory relative to the current directory
• it contains subdirectories holodark, ios, and bootstrap
• each of those subdirectories contains file1.css
• there is a common.css file for each theme

The theme is detected automatically based on the platform and browser, and the correct file is loaded as well as the global css file for the theme.

You can alternately pass an additional URL parameter string theme={theme widget} to force a specific theme through the browser URL input.

The available theme ids are:

• bootstrap
• holodark (theme introduced in Android 3.0)
• ios

The theme names are case-sensitive.

Note: As of release 0.2.0-dev, holodark and ios themes are disabled. They can be enabled using the following configuration:

require.config({
    config: {
        "delite/theme": {
            themeMap: [
                [/Holodark|Android/, "holodark"],
                [/iPhone|iPad/, "ios"],
                [/.*/, "bootstrap"]
            ]
        }
    }
});

Common CSS classes

delite/theme also implicitly defines some CSS classes:

• d-readonly, d-disabled - For form controls or other elements that are disabled / read only.
• d-reset - Use this style to null out padding, margin, border in your template elements so that page specific styles don't break them.
• d-inline - To inline block elements.
• d-hidden, d-shown - Hide a node via class="d-hidden", or in templates, via either d-hidden="{{hideFlag}}" or d-shown="{{showFlag}}". These are set to !important to override any general styling on the node.
• d-popup - Used internally by delite/popup for styling the wrapper around popup nodes.

Example

To load the css file ./a/b/{{theme}}/file1.css you can use:

require(["delite/theme!./a/b/{{theme}}/file1.css"], function (){
    // Code placed here will wait for ./a/b/{{theme}}/file1.css before running.
});

Or as a widget dependency:

define(["delite/theme!./a/b/{{theme}}/file1.css"], function (){
    // My widget factory
});