Hi everyone.
I'm trying to change the color of the material theme on a test program.
But it doesn't seem to work.
my fiddle test:
https://fiddle.sencha.com/#view/editor&fiddle/2v01
where am I wrong?
thank you so much
DARK MODE MATERIAL CLASSIC THEME
Hi everyone.
I'm trying to change the color of the material theme on a test program.
But it doesn't seem to work.
my fiddle test:
https://fiddle.sencha.com/#view/editor&fiddle/2v01
where am I wrong?
thank you so much
Setting colors on the fly like that would require Fashion (the JavaScript theme compiler that uses Sass like syntax) and Fiddle does not run with this. Fashion is housed within Sencha Cmd and does not expose Fashion to be deployed with an application.
Now since CSS variables is not an Ext JS/Cmd thing, you can still change them via JavaScript. If you inspect the DOM and select the <html> node, you'll see the CSS variables with the :root selector. To update these, you can change them via the document.documentElement:
This won't get you 100% what you want likely, Cmd/Fashion still do a lot with these variables but that's how you can at least change the CSS variables that other styles may use.
Mitchell Simoens @LikelyMitch
Check out my GitHub:
https://github.com/mitchellsimoens
Posts are my own, not any current, past or future employer's.
Thank you very much Mitchells,
But if I wanted to create the material dark theme in classic, how do I get the .sass files to use with the theme compiler?
Is there a way to create them automatically?
To use the sass files, you’d need to setup different builds at build time, not runtime.
Mitchell Simoens @LikelyMitch
Check out my GitHub:
https://github.com/mitchellsimoens
Posts are my own, not any current, past or future employer's.
Yes sure.Originally Posted by mitchellsimoens
I'm willing to create all the themes and simply redirect the upload from one to the other with a few lines of code.
A bit like doing kitchen sink.
But my problem is the creation of .scss files.
For example, if I wanted to create a dark theme for classic (for triton or material) what are .scss to create? and what to put in it?
There are guides available for theming:
https://docs.sencha.com/extjs/7.0.0/...s/theming.html
https://docs.sencha.com/extjs/7.0.0/...n_theming.html
https://docs.sencha.com/extjs/7.0.0/...ial_theme.html
And components lists variables and mixins, example for Ext.Button: https://docs.sencha.com/extjs/7.0.0/modern/Ext.Button.html#css_var-S-$button-action-ui
Mitchell Simoens @LikelyMitch
Check out my GitHub:
https://github.com/mitchellsimoens
Posts are my own, not any current, past or future employer's.
I know this is an old post, but I was recently trying to demonstrate how to implement dark mode for the classic material theme in a fiddle for ExtJS 7.1.0 and I figured out a workaround for it.
Basically, if you add a remote javascript file that points to the css-vars.js file that's hosted on the Sencha site, you can get it to work.
Here is the one that I used:
https://cdn.sencha.com/ext/commercia...es/css-vars.js
Here's a link to my fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/34r1
Hope this helps someone.
Mike G
Posting Permissions
