Is it possible to change the base code of a theme in Ext JS without creating a new custom theme?

If there is, can someone please provide a method for doing this?

Thanks

Is it possible to change the base code of a theme in Ext JS without creating a new custom theme?

If there is, can someone please provide a method for doing this?

Thanks

• javascript
• extjs
• themes
• sencha-touch
• extjs6

Share Improve this question Follow asked Jul 12, 2016 at 14:35 LuliLuli 4111 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

If your application is built by Sencha Cmd, easy as cake.

From your app directory with the javascript source code of Application.js, navigate to ..\sass\src.

Now create a file Application.scss which contains:

$base-color: dynamic(#fc0)

Call sencha app build production and you will find that your application now uses the worst yellow I could find, instead of the original blue.

(I have tested against an application with Triton theme, there are some issues with gray and classic theme because they rely on background images which are not affected by a changed base color.)

Alexander's answer is the correct one for lasting changes. If you need ad-hoc style changes, look at the Ext.util.CSS class and its method updateRule, which allows you to change individual styles for css classes. This requires some fiddling however, because the base color is used in many different places and also in lighter/darker variations.

swapStyleSheet lets you change the entire theme or variations of theme overrides.