Fran Dios
Fran Dios
Jan 17, 2018 · 3 min read

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!

Onsen UI Dark Theme

It is provided as onsenui/css/dark-onsen-css-components.css in versions ≥ 2.7.0. CSS variables are located in onsenui/css/dark-theme.css .

Theme Roller

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.

Onsen UI Theme Roller

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.

Onsen UI Theme Roller — Bulk Edit

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.

Onsen UI Theme Roller — Selecting Components

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!

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Fran Dios

Written by

Fran Dios

I create apps from Tokyo with love. I also like tomatoes.

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade