Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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
-
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.
-
@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 :)
