Theme Ext JS apps visually and without writing Sass code
Sencha Themer empowers you to style Ext JS 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.
- Ext JS 6.0+
- ExtReact 6.0+
Theme with a Pre-Built App
Sencha Themer provides a pre-built example app that has many Ext JS 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 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 or ExtReact app, or import your new theme into Sencha Architect.
Themer for Ext JS
Themer is available as part of the Ext JS Enterprise, Premium and Pro packages. Try Sencha Themer free for 30 days by downloading the Ext JS trial. The confirmation email includes a link for Themer and resources to help you get started quickly.
Themer for ExtReact
ExtReact provides the most complete set of 115+ components for your React apps in a single, commercially supported, and professionally maintained package. Developers can use the built-in Material design inspired theme, eliminating the need to construct custom styles and making it easy to create a fresh, modern user experience with minimal effort. Themes can also be easily modified or extended within Sencha Themer, enabling both developers and designers to create compelling themes without writing a single line of code.
Themer is available as part of the ExtReact Premium package. Try Sencha Themer with ExtReact free for 30 days by downloading the ExtReact trial. The confirmation email includes a link for Themer and resources to help you get started quickly.