Results 1 to 6 of 6

Thread: DARK MODE MATERIAL CLASSIC THEME

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

    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,450

    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
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

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

    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,450

    Default

    To use the sass files, you’d need to setup different builds at build time, not runtime.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

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

    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,450

    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
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

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