Tutorial: Customizing Onsen UI Themes
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
gentle ben last edited by
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'sI know this way is not using gulp, but it works and it is quick.
huzly last edited by
@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.
huzly last edited by
@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 :)