Build a Completely Custom Ext JS Theme in Less Than 10 Minutes

Developers need to quickly theme applications to match their company‘s branding, identity, and guidelines.

The good news – Ext JS has an extremely powerful theming system due to its massively integrated component library.

One of the primary benefits of the Ext JS integrated component library is that components are organized in a hierarchy and inherit properties from their parent components. This hierarchy allows you to quickly theme an application by changing a small set of Sass variables that flow from top-level components down to their child components and then throughout the entire application. This inheritance hierarchy is precisely what distinguishes Ext JS as a powerful and user-friendly Javascript Web Framework for theming your applications.

Using Ext JS Sass Variables to Theme Your Apps

There are four major areas developers and designers should concentrate on when theming an Ext JS application:

• Colors
• Fonts
• Spacing
• Animation

Changing the default Ext JS Sass variables for colors and fonts can be done quickly and has a big effect on the theming. Because the goal of this blog is to help you quickly theme an app, we will only focus on these areas for the remainder of this article.
(Changes to spacing and animation take longer to implement and have a smaller impact.)

When theming an Ext JS application from scratch, you should begin by changing the default Global_CSS variables and then the Component Sass variables.

Changing the Sass variables in the following order will have the greatest impact:

1. Global_CSS
2. Buttons
3. Containers
4. Toolbars

I’ve taken 21 Sass variables from Global_CSS and the Components listed above for the Classic toolkit, and I’ve made them available on Github, so it’s easy to get started. Try changing these variables in your application to see the powerful changes. If you want to create a completely new theme package, so you can reuse the theme in multiple applications, see instructions in the Ext JS docs.

If you want a great starter app to test your theme, check out the Theme Helper App on Github; it was created by my colleague Lee Boonstra.

Using Sencha Architect to Theme Your Apps

If you are using Sencha Architect, Quick Theming is an option that is also available to you using most of the same Sass variables in the Github link above.

To access Quick Theme:

1. Select the Theme Option in the Toolbox.
2. Then under the “Quick Themes” dropdown, drag and drop one of the available Quick Themes to Resources in the Project Inspector.

Quick Theme in Sencha Architect

Share Your Experience

The Sass variables that I shared in Github are just a few that can have a big impact on the look of your app. Do you agree with this list? If not, fork my variable list in Github and add your own; please post the link in the comments below, so everyone can see your new theme.

You can download the latest version of Ext JS here and start theming!