Theme apps visually without writing Sass code

Sencha Themer empowers you to style Ext JS, ExtAngular and ExtReact apps and make them look great. You can create custom themes using graphical tools – without writing code. Themer gives you access to components and inspection tools to set fine-grained styles and generate theme packages with dynamic stylesheets.

With the innovative color palette in Themer, it’s easy to apply different color combinations to different component states. The color palette shows base, body background, and font color with progressively lighter and darker colors. There is also a palette that helps you select colors from Material Design. The Themer font management option allows you to quickly add web fonts from Google fonts.

Theme with a Pre-Built App

Sencha Themer provides a pre-built example app that has many Ext JS, ExtAngular and ExtReact components you can theme. You can create custom themes by customizing any base theme including Material, Triton, and iOS. You can easily theme global variables including base color, background color, font, gradient, and more.

Create a Distinct Style

Ext JS, ExtAngular and ExtReact components have a UI mixins configuration for generating multiple visual renditions of a component. Themer makes it easy to create and style UIs for a large number of components including Grid, List, Tabpanel, Title bar, and Form components. With Themer, you get access to all Sass variables to customize and create a distinct look for your application components.

Inspect and Theme Your App

With Themer, you can inspect component styles visually rather than going through hundreds of Sass variables. Themer provides a unique inspect mode that freezes the state of components and locks the styles, so you can easily apply different styles to various states of components such as hover, pressed, selected. Using Inspect mode, you get access to your application component tree, which provides a powerful way to navigate, select, and style components in your app.

Export and Share Your Theme

Once you’re happy with your theme, a single click will export the theme as a theme package. You can then share the theme with other users, add to workspaces, “publish” the theme to any Ext JS, ExtAngular or ExtReact app, or import your new theme into Sencha Architect.