Description
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.
Main Features
- one generated theme (package) per color
- each theme built with
sencha package build - built
cssfiles andresourcesdirectories 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.
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
