Page History

...

Here's a basic example:

themes:
  # grandchild theme
  - name: custom-A
    extends: custom-B
    handle: '10673/34'
  # child theme
  - name: custom-B
    extends: custom
    handle: 10673/2
  # default theme
  - name: custom

themes: [
// grandchild theme
{
    name: 'custom-A',
    extends: 'custom-B',
    handle: '10673/34',
},
// child theme
{
    name: 'custom-B',
    extends: 'custom',
    handle: '10673/2',
},
// default theme
{
    name: 'custom',
},]

In the above exampleexamples:

• When the object at Handle '10673/2' (and any child objects) is viewed, the 'custom-B' theme will be used.  By default, you'll have the same styles as the extended 'custom' theme.  However, you can override individual styles in your 'custom-B' theme.
• When the object at Handle '10673/34' (and any child objects) is viewed, the 'custom-A' theme will be used. By default, your overall theme will be based on the 'custom' theme (in this case a "grandparent" theme).  But, you can override those styles in your 'custom-B' theme or 'custom-A' theme. 
  • The order of priority is 'custom-A', then 'custom-B', then 'custom'.  If a style/component is in 'custom-A' it will be used. If not, 'custom-B' will be checked and if it's there, that version will be used.  If not in either 'custom-A' or 'custom-B', then the style/component from 'custom' will be used.  If the style/component is not in ANY of those themes, then the default (base theme) style will be used.

...