Sencha Themer 1.0 is Now Generally Available

Today, we’re pleased to announce that Sencha Themer 1.0 is now generally available as part of Ext JS Premium. Themer empowers you to easily theme Ext JS 6 apps and make them look great. You can design themes in an interactive visual environment without coding, making theme creation accessible to developers and designers who do not usually write Sass code.

You can use Themer to style your web applications developed with Ext JS 6.x Classic toolkit and Modern toolkit. Themer 1.0 requires Cmd 6.2.

Download Now

• Ext JS Premium customers: Download Sencha Themer from the Support portal.
• Download a 30-day free trial*
  *Note: when you receive the Ext JS free trial confirmation email, you can choose to download Themer only.
• Try it out and give us your feedback in the forum.

Sencha Themer 1.0

Themer provides an easy way to create custom themes for your Ext JS application. With Themer, you can define the visual presentation of Ext JS applications by selecting the base color, background color, fonts, gradients, and individual styling of Ext JS components. You can select one of the base themes – Material, Triton, Neptune, Crisp, Grey, Classic, or iOS. You can visually configure 25+ global Sass variables with values that cascade and affect all of the Ext JS components. You can select individual Ext JS components and configure hundreds of component Sass variables.

Key Features of Themer 1.0

Style Ext JS 6.0 and 6.2 Classic Toolkit Components

Themer provides a components gallery that makes it easy to view the comprehensive set of Ext JS components and their styles. By selecting “Classic” tabpanel, you will find all Classic Ext JS components on the left and the component’s theme variables on the right. The preview in the center shows the results of changes in Sass variables. For example, the Toolbar component has 64 Sass variables. The screenshot below shows how you can access the Toolbar overflow and corresponding Sass variables.

Style Ext JS 6.0 and 6.2 Modern Toolkit Components

Themer allows you to quickly switch from Classic toolkit to Modern toolkit by selecting the “Modern” tab panel, which can be found at the bottom of components gallery. Themer makes it easy to view the large number of Ext JS Modern toolkit components that support modern browsers, tablets, and smartphones as well as their Sass variables. For example, the Modern List component has 42 Sass variables. The screenshot below shows how you can access the List component and corresponding Sass variables. As you make changes to List Sass variables, you can see the changed style in the center pane in almost real time with the Sencha JavaScript compiler Fashion.

Get a Comprehensive View of All Changed Sass Variables

Themer provides a comprehensive view of all Sass variables on the right tab panel. It also provides a filter to show only those Sass variables that are changed. It shows Global variables that you can easily theme and cascade, including base color, background color, font, gradient, and more. For example, below is a screenshot that shows all changed Sass variables in this custom theme.

Create Custom Component UIs

Themer provides an easy way to configure a user interface (UI) configuration. Because every component in the Ext JS framework has a UI configuration, it’s a handy way to configure individual component instances that have a different appearance from other instances of the same type. In this GA release, the ability to create a UI configuration is provided for buttons, panels, tab bar, toolbar, window, and treelist. After you create a new UI using Themer, please make sure to reference the corresponding UI configuration in your component code. Creating custom component UIs requires Ext JS 6.2.

Lock Component State and Inspect Styles

Themer provides inspect mode, which allows you to select a component in the center pane and view the styles that affect it. By enabling inspect mode, Themer freezes the state of all components in the center pane. This allows you to lock a component in a particular state such as hover, pressed, or open. The screenshot below shows inspection of a grid row and the ability to modify corresponding Sass variables.

Add Web Fonts

Themer provides an easy way to add web fonts. The following screenshot shows that by just adding the URL for Google font Lato, you can make that font available within Themer. You can then apply the added web font to any Ext JS component.

Apply Your New Custom Theme to Your Ext JS App

Applying a theme to your app using Themer is very easy. If you have created a theme within your workspace or app, those apps will be available in the dialog “Apply Theme to App(s)” as shown in the screenshot below. You can then select the app and the theme will be applied.

Conclusion

To get started, please read the Sencha Themer Walkthrough guide, watch the Sencha Themer videos, and create a new custom theme. Once you’ve tried Themer, please share your feedback in the Themer forum.

We wish to extend our heartfelt thanks to our community. Your feedback, bug reports, and interactions in the HipChat room during the Early Access program have made it possible for us to achieve this milestone. We hope you enjoy creating great looking Ext JS web apps using Sencha Themer.