Everything You Need to Theme Stunning Web Apps
Overview

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.
Use Pre-Built App

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.
Custom Theme

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 & Theme

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 & Share

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.
Design Better Applications with Sencha Themer
Themer for Ext JS
Ext JS is the most robust, comprehensive JavaScript framework for building enterprise-grade, data-intensive web apps for desktop, tablets, and smartphones. It provides the largest set of rich, customizable UI components, all designed to work together seamlessly. Themer ensures that you deliver a consistent, polished look and feel for a superior user experience. Try it as part of a 30-day Ext JS trial.
Themer for ExtAngular
ExtAngular provides a 140+ components for your Angular 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, making it easier to create a fresh, modern user experience with minimal effort. Themes can also be easily modified or extended within Themer, enabling developers and designers to create compelling themes without writing a single line of code. Try it as part of a 30-day ExtAngular trial.
Themer for ExtReact
ExtReact provides a 140+ 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, making it easier to create a fresh, modern user experience with minimal effort. Themes can also be easily modified or extended within Themer, enabling developers and designers to create compelling themes without writing a single line of code. Try it as part of a 30-day ExtReact trial.
GETTING STARTED
- Ext JS Quick Start Guide
- ExtReact Quick Start Guide
- ExtAngular Quick Start Guide
- Create a New Theme video
- Sign up for Training
SUPPORTED FRAMEWORKS
- Ext JS 6.0+
- ExtReact 6.0+
- ExtAngular 6.0+
SUPPORTED SUBSCRIBERS
- Latest version: Themer 1.3.4