I want to:
  • Create a new theme in Themer
  • Set the base colour
  • Create a new UI for a tab panel
  • Set the tab bar base colour for the UI (the equivalent of $tabbar-base-color)
  • Import the theme into Sencha Architect
  • Apply the new tab UI to one of the tab panels in my app

Is this even possible? It feels like it should be pretty straight forward, however I've spent the last several hours going around in circles.

Creating a new theme in Themer, setting the base colour, importing it into Architect works fine. In Architect, I see a new theme and it has some very basic SCSS (setting just the base colour).
When I click the 'add ui' button in Themer and select the tab panel, the SCSS seems to blow way out, including what I presume is everything possible for the UI.
Themer doesn't have the option to change tabbar-base-color when editing a UI, and when I select 'show SASS variables', it doesn't give me the option there either.
If I go to the main tab panel config in Themer, I can set the global tabbar-base-color, which gets updated in my app OK.

Finally, when I am in Architect, it doesn't seem to recognise the UI names included in the theme for me to select for the tab panel. It does seem to apply the theme OK if I type the UI name in by hand, although I even had to do that twice as it seemed to reject it on the first attempt...

Am I missing something here, or are things horribly broken?