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.

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

All themes support light and dark backgrounds.

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.

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:

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:

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

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