theming

Hi Folks,

Any news on using different themes or at least customizing onyx? Something like JQuery theme roller thing would be nice.

Cheers
andre

Comments

  • What's stopping you from doing it?
  • rafa_bernard I am waiting for good tools to do theming.
  • We have less support in enyo and Onyx to apply different colors and styles to the control sets, but we've not really built up any alternate styles yet.
  • In HHT, I allowed users to pick themes, and then set CSS properties using the style attribute, i.e:
    enyo.kind({ name: "ThemedButton",
    kind: "onyx.Button",
    style: "color:"+Theme.textColor+"; background-color:"+Theme.buttonColor+";"
    });
    I attempted to use Less, but couldn't find a good way for it to handle multiple themes.
  • You can set a default namespace for your kinds by using:

    enyo.registerTheme(onyx);

    Then, just use your kind definitions without the namespace ("onyx" in this case):

    kind: "Button" will default to onyx.Button. If onyx.Button doesn't exists, it will fallback to enyo.Button.

    So if you register "myTheme":

    enyo.registerTheme(myTheme);

    You don't need to change the rest of your code: kind: "Button" will default to myTheme.Button, and fallback to enyo.Button

    BUT: This works only on app's startup, and will not change themes on the fly Aside from that, this and less is all we have for now.
  • edited June 2013
    @MachiApps, something you can do with less is wrapping your custom themes/color schemes to a body class, as follows:

    Theme.less:
    @my-button-background: #333;
    .onyx-button {
    background-color: @my-button-background;
    }

    /* additional css classes */
    Button-red.less:
    body.button-red {
    @my-button-background: red;

    .onyx-button {
    /* other additional changes to onyx-button class, different than background-color */
    }

    /* changes to other classes */
    }
    Less will generate all the css to apply the proper changes. There's a lot of stuff that can be done just with less. You just need to apply the proper class to body.
  • @rafa_bernad The only reason I didn't go with less was the theme setup I used can be customized by the end user, including any color they want for each part. The definite drawback is when they change themes we have to reload to app.

    I never thought of changing the namespace, I can see this being useful if we wanted to customize the theme more than just the colors (i.e. different sized buttons, text, etc). This would simplify overall changes to the layout too.
  • Guys,

    You all rock!!! Thank you very much @rafa_bernad, @unwiredben and @MachiApps for the tips, I will put them to good use.

    =D
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Twitter