Self-contained theme for a bundle

The default themes in map.apps do not provide all styles for custom bundles. Therefore map.apps provides a way to deliver styles needed by a bundle (and only those) inside the bundle itself. This is called a self-contained theme. The theme for all other bundles remains part of the map.apps installation and is loaded separately.

To create a self-contained theme for a bundle add the following "cssThemesExtension" object to the manifest file of your bundle. name must match the themename that should be supported with your bundle. The files property must match the path (relative from manifest.json file) to your main css file.

manifest.json

{
    .....,
    "Require-Bundle": [{
        "name": "map",
        "version": "[3.0.10,)"
    }],

    // Announce the bundle's styles
    "cssThemesExtension": [{
         "name": "winter",
         "files": ["./themes/winter/myBundle.css"]
    },
    {
         "name": "summer",
         "files": ["./themes/summer/myBundle.css"]
    }],
    "Components": [
       .....
    ]
}

Now add the folder structure "myBundle/themes/summer" and "myBundle/themes/winter" to the bundle and create a css-file "myBundle.css" inside where you can place the additional styling for your bundle.

Advanced usage

The following codesample displays the posibilities how to use the self-contained themes

manifest.json

.....,
// Announce the bundle's styles
"cssThemesExtension": [
{
    // the * as name matches to folder "./all/all.css".
    You can use this if you have styles that can be used in any theme.
    "name":"*"
},

{
    // this sample shows how you can set a theme name and the folder where you drop the styles for this theme
    "name": "winter",
    "files": ["./themes/winter/myBundle.css"]
},
{
    "name": "summer",
    // you can omit the files path if your theme's folder and css file is called the same as your theme's name
    // this is the same as adding "files": ["./summer/summer.css"]
}]
.....