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
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.
- one generated theme (package) per color
- each theme built with
sencha package build
resourcesdirectories 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
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
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