In case you didn’t know, Onsen UI’s dark theme was released some time ago. Either if you want to make an app for hackers or simply a night mode of your existing app, you should check it out!
It is provided as
onsenui/css/dark-onsen-css-components.css in versions ≥ 2.7.0. CSS variables are located in
The new Onsen UI Theme Roller app is alive! Make your own theme or just tweak the existing ones easily with this new online tool. It is available here.
The new Theme Roller is compatible with Onsen UI v2.6.0 and up, you just need to choose your desired version in the drop-down. The old Theme Roller is still available for versions equal or older than v2.1.0 (using Stylus). Versions in between won’t be supported by this new app due to some errors in the CSS components in those versions. However, updating to +2.6.0 should not be hard!
Colors can be modified variable by variable through a Color Picker or all together with the bulk editor.
The latter also allows importing your current theme for further customization by copy-pasting your variables (
theme.css file) and pressing “Save changes”. Any color feature supported by cssnext is available here.
Once your custom theme is finished, you can download the result in the “Download” section. Furthermore, you can even remove elements that you don’t need from your theme in order to reduce the size.
Elements can be added back at any time by just importing the previous theme and generating a new one.
Bonus: Resources Loader
In Webpack applications, you can use
sass-resources-loader to share your CSS variables across your app. Even though it’s originally made for SASS, it actually works well with other preprocessors and with cssnext features.
I personally use it to provide common CSS variables in every
<style scoped> block in my Vue.js apps, but it can be used in other ways and with other frameworks as well. For example, in the Theme Roller app, any of these variables, mixins and media queries can be used in any component’s style block.
In mobile apps, you can share Onsen UI theme variables and access them in any other CSS module. I hope you find it useful as well!