Results 1 to 7 of 7

Thread: Best practice for multiple themes for code in packages

  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    631
    Answers
    10

    Default Best practice for multiple themes for code in packages

    For our development we have a workspace with multiple apps and multiple packages. The package code is used by multiple apps and each package has its own sass src/var for styling. Here is our workspace structure.

    Code:
    workspace
        appA
        appB
        appC
        packages
            pkgA
            pkgB
            pkgC
            themeA
    themeA only contains sass for modifying the triton theme and doesn't have any app or package specific styling. pkgA, B, & C all have their own sass folder for styling their own components. appA, B, & C don't contain any sass overrides.

    The sass in the packages are a dark theme and we have a request to also have a light theme. I believe this is the order for determining which value wins.

    themeA
    packages
    app <- always wins

    I made a themeB changing pkgA values and as expected it didn't work. My guess is pkgA overrode what I had in themeB.

    So what are my options for creating multiple themes for code in packages? I could move all the package sass into themeA but then I lose keeping the src and sass together in the packages. Is there a way to keep the dark sass in the packages and create a theme for the light sass? I could have appA be the dark sass and have appB which includes all the overrides for the light but then I'm maintaining 2 apps.

    Just looking for the best recommendation on this.

  2. #2
    Sencha User
    Join Date
    Jan 2016
    Posts
    462
    Answers
    60

    Default

    Hard to tell, but if you are mixing theme packages, remember the order and specificity of CSS will have an effect.

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Location
    Heidelberg, Germany
    Posts
    79
    Answers
    1

    Default

    Are there no other suggestions? I can hardly believe this is such a rare requirement that there is not solution for it?
    I found a simple solution which includes creating theme-specific sass folders within the app and including them via app.json (ask me for details, if you are still interested). However, this approach fails when it comes to theme inheritance.

    So what do you do if you need to offer multiple themes for the same application and need to provide theme-specific code depending on the theme?

  4. #4
    Sencha User
    Join Date
    Mar 2016
    Posts
    44
    Answers
    2

    Default

    Quote Originally Posted by kleins View Post
    Are there no other suggestions? I can hardly believe this is such a rare requirement that there is not solution for it?
    I found a simple solution which includes creating theme-specific sass folders within the app and including them via app.json (ask me for details, if you are still interested). However, this approach fails when it comes to theme inheritance.

    So what do you do if you need to offer multiple themes for the same application and need to provide theme-specific code depending on the theme?
    We resolved it by following steps:

    create theme theme1
    create theme theme2

    Specified two builds like:

    Code:
    "builds": {
    
    BUILD1:{
        theme:"theme1"
    },
    
    
    BUILD2:{
        theme:"theme2"
    }
    }
    run
    Code:
    sencha app build
    and open your app in browser with following string e.g myhost:myport\profile=BUILD1 or
    myhost:myport\profile=BUILD2 }


    I hope it will help you

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Location
    Heidelberg, Germany
    Posts
    79
    Answers
    1

    Default

    @NoOnesThere89: Thanks for sharing your solution. I am familiar with this approach. However, this is not what I am looking for or what I understand the OP to be looking for.

    Themes only modify the styling of Ext-Components. This holds especially true for overrides that are part of a theme. If you need to adapt the styling of your own application / custom components etc. you use the sass and overrides folders within your app folder. However, these folders within your app folder are always applied, irrespective of the theme you are building, i.e. in your example above they are applied for both BUILD1 and BUILD2.

    But what if I want some style or overrides to be applied to a specific theme only, say I want to adjust a custom component to a theme, hide a titlebar in one theme and show it in another etc. As far as I can tell, Sencha Cmd provides no way of doing these and there does not seem to be a best practice. I asked a similar question 1,5 years ago and got no responses. I spent quite some time on this and found my own workarounds, but I am surprised this does not seem to be a standard use case that Sencha has come up with solutions for.

  6. #6
    Sencha User
    Join Date
    Mar 2016
    Posts
    44
    Answers
    2

    Default

    Hi @kleins, my skype noonesthere89. You can change styles for separate theme. For example in theme1 I use hided titles but in in theme2 I show titles. Maybe I didn't understand you problem but you can use my skype to give me more details.

    eg:

    packages/local/theme1/sass/src/panel/Header.scss
    packages/local/theme2/sass/src/panelHeader.scss

  7. #7

    Default

    Quote Originally Posted by NoOnesThere89 View Post
    Hi @kleins, my skype noonesthere89. You can change styles for separate theme. For example in theme1 I use hided titles but in in theme2 I show titles. Maybe I didn't understand you problem but you can use my skype to give me more details.

    eg:

    packages/local/theme1/sass/src/panel/Header.scss
    packages/local/theme2/sass/src/panelHeader.scss
    This is correct and its not a problem, I also have components with custom styling within theme just as you describe.
    But the original problem was how to apply this to custom packages. If you create a package called Dashboard, you would like to move styling from theme to package, as it contains its own saas/src folders.
    But how do you split that package specific styling into multiple themes, that is the question!
    I don't know if @estesbubba finally solved this problem? It's been two years now

    styling_package.PNG

Similar Threads

  1. Extjs Code packages load order.
    By Bharath` in forum Sencha Cmd
    Replies: 1
    Last Post: 14 Oct 2015, 2:20 PM
  2. Problems with code in packages
    By estesbubba in forum JetBrains IDE Plugin
    Replies: 3
    Last Post: 28 Aug 2015, 4:13 PM
  3. Replies: 9
    Last Post: 11 May 2013, 10:44 AM
  4. Sencha Touch themes with packages?
    By farion in forum Sencha Cmd
    Replies: 2
    Last Post: 8 Apr 2013, 8:04 AM
  5. Best practice for creating new themes
    By thomasandersen in forum Ext: Q&A
    Replies: 6
    Last Post: 23 Oct 2012, 11:01 PM

Posting Permissions

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