Setting CSS variables at runtime using Fashion.css.setVariables not working

[[email protected]]

Hello


I have a modern ExtJS 6.2.1 application packaged using Cordova for Android. The project is configured to use CrossWalk (Chromium) as WebView and theme-material as theme.


I include css-vars.js in index.html like this:

<script type="text/javascript" src="modern/resources/css-vars.js">  </script>

So, the class "Fashion" is defined at run-time, and the following call returns true:

var tt=Ext.theme.Material.hasFashion();

The problem is that when I call "setVariables" function like this:

Fashion.css.setVariables({
                'base-color': 'red'
            });

nothing happens, and no error is given on the console. Also, this function call:

Ext.theme.Material.setDarkMode(true);

does nothing, as it calls "setVariables" internally.


What can I do to be able to change the CSS variables at run-time? Why doesn't "setVariables" work? Is it because of Cordova packaging?


Thanks

[dongryphon]

Do you see a CSS selector for ":root" that is applied to the HTML element? Select that element in the Elements tree of the debugger and you should see things like "--base-color: #2196f3;" and many others like it...

[[email protected]]

Do you see a CSS selector for ":root" that is applied to the HTML element? Select that element in the Elements tree of the debugger and you should see things like "--base-color: #2196f3;" and many others like it...

Yes,I can see the :root selector applied to the HTML element, with --base-color any many other variables. But there is a line drawn through them, with a small yellow exclamation mark beside each variable saying: 'unknown property name'

aaa.png