In case you had a description and/or a thumbnail picture, you need to move it to the theme configuration. Both description and thumbnail are top-level properties. A typical usage could be:

{
  "name": "my-theme",
  "description": "This is my theme!",
  "thumbnail": "my-theme.jpg",
  ...
}

Please note that the path to the thumbnail picture is now relative to the theme's root directory rather than the theme's target directory. We highly suggest not placing the thumbnail picture inside the src/img folder of the theme anymore as long as you don't want the thumbnail to be available in the actual rendering of the website.

Defining external links can be achieved via a script or style of type externalLink .

{
  "name": "my-theme",
  ...
  "styles": [
    {
      "type": "externalLink",
      "src": "http://your.url/css/style.css"
    }
  ],
  "scripts": [
    {
      "type": "externalLink",
      "src": "http://your.url/js/script.js"
    }
  ]
}

If you just want to use an script or style resource that is not to be bundled via Webpack there is an additional type called "copy" which requires a src and target property.

{
  "name": "my-theme",
  ...
  "styles": [
    {
      "type": "copy",
      "src": "src/css/my-style.css",
      "target": "css/my-style.css"
    }
  ],
  "scripts": [
    {
      "type": "copy",
      "src": "src/vendor/some-script.js",
      "target": "js/some-script.js"
    }
  ]
}

Scripts and styles of all types can have the same custom settings as in the theme-descriptor. These settings can be applied separately for every array item inside the scripts and styles array. This could look as follows:

{
  "name": "my-theme",
  ...
  "styles": [
    {
      "type": "webpack",
      "src": "src/sass/my-theme.scss",
      "ieExpression": "gt ie10"
    }
  ],
  "scripts": [
    {
      "type": "webpack",
      "src": "src/js/my-theme.js",
      "inHead": true
    }
  ]
}

Please consult the Frontend Developer Manual for a full list of custom settings.

If your theme provides additional resource bundles, please add it to the bundleName property of the l10n top level property.

{
  "name": "my-theme",
  ...
  "l10n": {
    "bundleNames": [
      "MyTheme",
      "AdditionalBundle",
      "Bricks"
    ]
  }
}

Please note that the bundle names do neither contain the language (e.g. _en ) nor the extension of the properties file ( .properties ). If you need to change the master language you can set the masterLanguage property of the l10n top level property.

You are no longer required to place your main sass / javascript files under src/sass/themeName.scss / src/js/themeName.js . Feel free to adjust the src property of the scripts and styles to whatever file structure you prefer.

Additional Webpack Bundles can now be generated without adjusting the webpack.config.js . Just put another script or style of type webpack into the list of scripts and styles. However there is one restriction for styles because of technical limitations: All CSS/SCSS files need to be put into the same folder. The reason behind this is that our used Webpack plugins and loaders assume that all generated CSS files are placed under a common public path.

You can now defer the loading of scripts ( https://www.w3schools.com/tags/att_script_defer.asp ) using the custom setting defer in your theme configuration. In case you have custom templates for rendering CMJavaScript as script tags make sure you take the new htmlAttributes content property into account.