Read the accompanying blog post: Lightweight Theming

The standard (and recommended) way of Ext Theming involves creating a theme with Sencha Cmd, modify or create SASS files with styles comprising the theme and compile the application with that theme activated in app.json.

The result is a complete application (app.js) plus the theme what results in the necessity of reloading the application when we want to change the theme at the app runtime. Ext Kitchen Sink Examples are designed this way.

On the other hand, many times a much lighter approach is sufficient or required when we only need color variations of a default Ext theme, e.g. Neptune.

This example shows Neptune Theme color variations.

Open in new window.

Main Features

  • one generated theme (package) per color
  • each theme built with sencha package build
  • built css files and resources directories deployed to production server
  • themes are not optimized for the app but they contain theming of all Ext components
  • all themes (colors) must inherit from same base theme
  • runtime switching w/o reload

Use Cases

You can use this approach when you need only one theme but in many color variations. Reason for this “limitation” is that Ext themes consist not only of css and resources but also of javascript files that are packed into app.js.

If we switch only css and resources, as in this example, but the base themes are different then we wind up running Neptune javascript with Crisp resources, for example, what could break the app.

Source Files

Source of the form itself is not very interesting for this example, it is your application after all. What is interesting is the theme switching logic implemented in view controller MainController and Component.scss files from themes packages.

If you want to see the example code, login or sign-up. Free membership is available.
Follow me:
Latest posts by saki (see all)

Enter your username and password to log into your account. Don't have an account? Sign up.

Want to collaborate on an upcoming project?