Importing themes

On the Overview page in the Theme editor you can specify that a theme variant can import its values from its parent in the device hierarchy. You do this by checking the Import parent theme variant option, which is unchecked by default.

On the Overview page in the Theme editor you can specify that a theme variant can import its values from its parent in the device hierarchy. You do this by checking the Import parent theme variant option, which is unchecked by default.

If immediate ancestor variants are also set to import, the values will cascade down the device tree from the highest device that has the option checked to the lowest.

You can build complex themes, which share core branding styles specified at one level and modify these at other device family or specific device levels.

To work out the theme values for a specific device, MCS searches up the tree until it finds an import value set to false, after which it stops. The values from higher up the tree are added to, not merged with, any that you have set for the lowest device.

The table shows three device settings. The import value for Handset is false so it is the highest value set that MCS reads.

MCS combines all the values in the generated stylesheet, leaving the browser to handle the result of merging two identical child class selectors.

.main {
  background-color: red;
  text-align: center;
}
.child {
  background-color: red;
  text-align: right;
}
.child {
  background-color: blue;
}

The display outcome under normal CSS inheritance and specificity rules are shown in the next example, but it is possible that a browser may not provide the desired result.

.child {
  background-color: blue;
  text-align: right;
}