Tutorial: Customizing Onsen UI Themes


  • Onsen UI

    Onsen UI Theme Customization

    Onsen UI has a wide set of premade themes, which cover a rich set of color combinations. Although the default colors look good, when creating an app with Onsen UI we recommend customizing the theme to give the app a personal touch. Branding is important since it differentiates your app from others and makes it easily recognizable.

    Click here to see the original article



  • Hi - I hope it’s OK to bump this old thread. Does anyone know if this set of instructions is still valid? I am trying to run the instructions on the www/lib/onsenui folder of my project as it is the most obvious location with a package.json file but gulp gives me a “gulfile not found” error.

    If these instructions are no longer valid, what’s the best way to manually tweak the design of your theme?



  • @gentle-ben In my opinion, yes and no. I personally never go into the .styl files. In order to change themes, in my opinion, the easiest way is to just change the CSS line below:

    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
    

    To one of the other ones, such as:

    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components-dark-theme.css">
    

    I use the theme roller to modify it even further. With that, as long as you follow CSS hierarchy, you don’t have to lace your file with a ton of !important's I know this way is not using gulp, but it works and it is quick.



  • @munsterlander hey there. i changed the second link like you mentioned above but it seems like it only works on components-dark-theme.css but not other files such as components-purple-theme.css. any idea why?



  • @huzly If you are using the most current version of Onsen, I think I read that they didn’t update those. Otherwise, just make sure that the file exists and it should work.



  • @munsterlander well the file did exist along with components-dark-theme.css but idk why only this file is able to be used. is there any other way on how i can get to change the theme? thanks :)


Log in to reply