Theme Builder

Easily customize the look and feel of Mobiscroll

Levi Kovacs avatar
Written by Levi Kovacs
Updated over a week ago

What is the theme builder?

The easiest way to customize the look & feel of Mobiscroll controls and forms is with the Theme Builder. Pick and adjust theme colors on a visual interface without any CSS coding. The editor supports live preview for all UI controls.

What can be customized?

Each theme has parameters that can be changed. These parameters make out the theme with some calculations that are done behind the scenes.

  • Background - controls the background color

  • Text - controls the text color

  • Accent - highlighted elements

  • Button - iOS theme has an additional parameter for controlling the button text color

All themes support light and dark backgrounds.

What cannot be customized?

Properties like font-size, fonts, spacing cannot be customized with the theme builder. Some size-related adjustments - like wheel-width - can be done through the API while everything else needs to be handled with CSS.

For further styling CSS overrides can be added to an external file. Complete license holders get the full uncompressed source for in-depth customization.

How to build custom themes?

Step 1. Go to the theme builder (make sure you are logged in). It can also be reached from both the licensed product download and the trial install page.

If you are trialing Mobiscroll, this is how you get to it from install page.

Step 2. Pick the base theme you would like to customize:

  • Mobiscroll

  • Material

  • iOS

  • Android Holo

  • Windows Phone

and start with one of the presets from the left.

Step 3. From here you can update the parameters, use your brand or app colors and see how it changes live.

When everything looks good, give it a name hit save. The theme will be ready for download. 

NOTE: If you are on a trial, you won't be able to download the themes, however it will be available to you once you upgrade.

How to use custom themes with the NPM packages

Starting from version 4.7.0 the NPM packages are shipped with SCSS mixins which makes it possible to create custom themes programatically. To create a custom theme, make sure to load the SCSS file from the NPM package. After that you can create a custom theme like this:

@include mbsc-custom-theme('mobiscroll-red', 'mobiscroll', ('background': #f7f7f7, 'text': #454545, 'accent': #e61d2a));

Custom themes needs to be registered in the javascript / typescript code as well, once the Mobiscroll modules are loaded:

mobiscroll.customTheme('mobiscroll-red', 'mobiscroll');

For more details on working with SCSS variables and mixins, read the docs.

What's next?

Did this answer your question?