Rapidly Deploy Visually Stunning Themes For Your Javascript Apps

Give some style for your application is crucial to give life to your products and attract the end-user. But sometimes has a high cost to implements it using CSS. Sencha has a solution which helps solve this problem through a smart theming solution.

Sencha Themer empowers you to style Ext JS (arguable the best js framework in our view), 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.

This tool allows you to transform your desktop, tablet, and phone application into a beautiful and modern application creating your own theme without any line of code!

What is Sencha Themer?

Sencha Themer is a tool to create new themes for your application based on pre-defined themes in a very fast and productive way. The theme created can be exported and shared to reuse again and again.

You have the color palette to choose the best base colors, select 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.

There is also access to components and inspection tools to set fine-grained styles and generate theme packages with dynamic stylesheets.

Getting Started

First, download here and install Sencha Themer on your machine.

Second, you will create your new Ext JS, ExtReact, or ExtAngular application to apply the new theme and see updates applying live.

Creating the Application

You can create a new application by running the commands below:

sencha -sd /Users/fabio/sencha-sdks/ext-7.4.0/ generate app AppNewTheme ./app-new-theme-extjs

And start your application:

cd app-new-theme-extjs/ && sencha app watch

Now open your application with fashion option enabled, with this URL: http://localhost:1841/?platformTags=fashion:true

How can I change my theme using Sencha Themer?

Now that your application is ready and running, let’s open our application on Sencha Themer to change it with whatever you want to give your personality to your application.

Follow the steps below to create your own theme.

• After opening it, click on Create Theme button:

• Fill the informations about the new theme, giving a name, select your application path on App field, the toolkit of the application you would like to apply the new theme, and finally the base theme you will be based on to create your new theme, then click on Create Theme:

• After open the theme, select a color on base color field to see it in action:

Then when you open your application, you can see that changes were applied automatically:

How do I change styles for Specific Components?

You can also personalize specific components like buttons, toolbars, grids, forms, and many other components on your application.

For our app, let’s change our grid a little bit.

From the left side, select the grid component, and then on the right side, change the font color, weight, style, etc:

You will see changes on your grid header applied on the fly:

What else can Sencha Themer do with themes?

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.

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.

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.

How can I deploy Sencha Themer today?

Keep going with your own theme, changing the general application base color, fonts, etc. Also, navigate on different components and personalize as you prefer. Save your theme and share it to use on different applications.

Head over and check out more product information about Sencha Themer and download it now.