Results 1 to 7 of 7

Thread: DARK MODE MATERIAL CLASSIC THEME

  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    374

    Default 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

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    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.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    374

    Default

    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?

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    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.

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    374

    Default

    Quote Originally Posted by mitchellsimoens View Post
    To use the sass files, you’d need to setup different builds at build time, not runtime.
    Yes sure.
    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?

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    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.

  7. #7
    Sencha Premium User
    Join Date
    Mar 2020
    Posts
    1

    Default

    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

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •