There are many reasons why you might want to change the look of your app. That’s why we came up with the Themes feature in Sencha Architect 3. Theming was one of the most requested features, and I’m proud to be one of the people who worked on adding it to Architect 3.
In this blog post, we will give you a quick run through of the Themes feature and share a few tips. You’ll also learn how to export a theme built in Architect, so you can use it with other Sencha Touch and Ext JS projects.
To learn more, sign up for the Architect 3 webcast on Thursday, 12/12 at 9-10am PST.
The New Themes Feature in Architect 3
Sencha Touch and Ext JS themes are built using Sass. Sass uses the same syntax as SCSS, and it makes working with themes more efficient than CSS. Ext JS and Touch themes consist of rules that form the base for all the components to display correctly across different browsers. You can change the look of UI components by editing these rules and variables.
Theming can mean a lot of different things, from simple tweaks to a complete visual overhaul. To make global changes to components, you modify variables in the base components which are then inherited by other components down the line. You can make localized changes by applying styles to component instances or creating custom Sass rules.
Variables can inherit values from each other. You can reference component variables in your custom Sass.
Take a look at the diagram below for a visual representation of how variables and custom Sass work together.
Tip: It is possible to modify or create new inheritance structures in variables. To create a new inheritance, right click a variable to copy its Sass reference, and paste it to another variable. Avoid circular references because your code will not compile.
The best way to customize themes is to take a top-down approach. Start by defining global settings and variables, and then get more specific as you go along. This should make your code easier to understand and maintain.
As you get deeper into the component hierarchy, you’ll notice inheritance and dependencies on higher classes increases. Take a look at the screenshots below, to get a better idea of what this means.
Top level theming is done through global or base variables. These variables are listed under Ext.Component for Ext JS and Ext.Class for Touch. These variables do not change the styling directly. Instead, they are inherited by most of the other variables. For example, in the Touch Default theme, you’ll find variables like ‘
base color’ or ‘
font family’ that directly affect a component or UI style variables. And in some cases, they’ll indrectly affect them, so you need to be careful.
Tip: Always try to keep the number of variables you are modifying to a minimum. If you are modifying a lot of component variables, check to see if there is a base variable that corresponds to all of them first.
Component variables offer more detailed configuration options. Typically, you only change these variables if you are making major changes to the visual appearance of a theme. Keep in mind, changes to component variables will change the look of all the instances of the same component. Proceed with caution — a lot of component variables inherit from base variables or other component variables.
Some UI components can be fairly complex, such as Grid Panel (
Ext.grid.Panel). Its appearance depends on variables defined in 15 different classes. That’s because Grid Panel is the combination of multiple components including a panel, columns, rows, editable cells, a grid, grouping headers, etc. You should also be aware that not all relevant component variables are listed when you select a component. When that happens, select the entire theme and search for the variables there. For example, if you’re using Grid Panel, searching for ‘grid’ will find all the variables you need to configure it.
Take a look at the following screenshot to see a list of variable groups containing gr