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 CLI

The NPM packages are only containing the built in themes. 

To use custom themes, you will need to download a custom package, and use the CLI to configure it, just pass the --no-npm flag. 

Here are the steps to follow:

  1. Use our download builder to download a package containing the custom themes and components you need (make sure to include the custom themes).
  2. From the downloaded package copy the lib  folder inside your apps src  folder.
  3. Run the mobiscroll config {framework} --no-npm  (where {framework}  is Angular , Ionic  or React) command to configure your app to use the downloaded package (make sure to use the latest @mobiscroll/cli version).

This will create a local NPM package and configure your package.json to use that, so your code using Mobiscroll can remain the same, including the imports.

What's next?

Did this answer your question?