[SOLVED] How to make a condition in ExtJS7 theme depending on JS logic

How to make a condition in ExtJS7 theme depending on JS logic

I have hundreds of ExtJS theme (Classic toolkit) global variables placed in ./theme/sass/var/Component.scss

Is there some way to create a condition depending on my JavaScript or Http query string environments?

I want to split a bunch of global variables on to separate groups and have ability to choose it from my application functions.

Solution

MODERN

Add variables to the theme. In modern you can use:

    $compoany-base-color-50: green; 
    :root {
        --company-base-color-50: export;
    }

In scss you now have to use the $company-base-color-50 or var(--company-base-color-50).

In JavaScript you can set the variable:

Ext.getBody().dom.setProperty("--company-base-color-50", "red");

CLASSIC

For custom components you can still use a variation of the MODERN approach.

:root {
    --company-base-color-50: #aabbcc;  // add more colors
}

And in your custom components you can easily switch colors.

const myComp  = Ext.get('myComp'),
      element = myComp.el,
      dom     = element.dom;

dom.setProperty("--company-base-color-50", "red");

But to switch a full theme you have to generate all themes and then use them via javascript. Follow this example:

With slight modifications you can load themes on the fly, so you do not have to load all themes initially.