---
title: "Javascript Forms Theming capabilities Example | Mobiscroll"
component: "Forms"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/forms/themes-ios-material-windows"
---

# Theming capabilities - JavaScript Forms demo

Javascript forms with iOS, Material, Windows light and dark themes. Choose from existing themes or create your own. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/forms/themes-ios-material-windows)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/form-components/forms/themes-ios-material-windows)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/forms/themes-ios-material-windows.md), [Angular](https://demo.mobiscroll.com/angular/forms/themes-ios-material-windows.md), [React](https://demo.mobiscroll.com/react/forms/themes-ios-material-windows.md), [Vue](https://demo.mobiscroll.com/vue/forms/themes-ios-material-windows.md)

## Description

Forms can be themed and customized. There are four levels of customization:

- Base themes: Choose between `iOS`, `Material` and `Windows`.
- Light or dark: Every theme has a `light` and `dark` variant. Setting the `themeVariant` to `'auto'` will switch based on system settings.
- Custom themes: Use the [theme builder](https://mobiscroll.com/themebuilder) to customize the colors and make it match your brand.
- Custom Sass and CSS: If you need further customization, the sky is the limit with Sass and CSS overrides.

You can also see how the other demos look by changing the theme in the floating action bar on the right side (not this example, the themes are hardcoded here).

## What this demo shows

- This demo shows different examples for theming options for the form components.
- **Base themes** Previews the `iOS`, `Material`, and `Windows` base themes.
- **Theme variants** Switches between the light and dark variants of each theme.
- **Component preview** Applies the selected theme to inputs, selects, switches, checkboxes, radio buttons, steppers, buttons, and segmented controls.
- **Live updates** Updates the component preview when the selected theme or variant changes.
- **Theme customization** Shows how a base theme can be customized further with the Theme Builder or Sass.

## Best for

- **Theme comparison**: Evaluating how form components look with the `iOS`, `Material`, and `Windows` base themes.
- **Light and dark mode previewing**: Checking how a form component setup looks across light and dark theme variants.
- **Branded form experiences**: Exploring how to extend a base theme with the Theme Builder, Sass, or custom CSS to match a product's visual style.

## Tutorial

### Pick a base theme

- (x) iOS
- ( ) Material
- ( ) Windows

### Then choose between light or dark theme variant

- [ ] Turn dark theme on

### Or build a custom theme based on any base theme

- [ ] Use the [theme builder](https://mobiscroll.com/themebuilder) or [Sass](https://mobiscroll.com/docs/javascript/select/css-variables) to customize themes

```js
theme: 'ios',
themeVariant: 'light'
```

With "Material":

```js
theme: 'material',
themeVariant: 'light'
```

With "Windows":

```js
theme: 'windows',
themeVariant: 'light'
```

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});
```

### HTML

```html
<div class="mbsc-form-group">
    <label>
        <input mbsc-input data-label="Input field" type="text" placeholder="Input with label" />
    </label>
    <label>
        <textarea mbsc-textarea data-label="Textarea" placeholder="Textarea with label"></textarea>
    </label>
    <label>
        <select mbsc-dropdown data-label="Select">
            <option value="Opel">Opel</option>
            <option value="Renault">Renault</option>
            <option value="Citroen">Citroen</option>
            <option value="Lotus">Lotus</option>
        </select>
    </label>
    <label>
        <input mbsc-switch data-label="Switch" type="checkbox" checked />
    </label>
    <label>
        <input mbsc-checkbox data-label="Checkbox" type="checkbox" checked />
    </label>
    <div mbsc-radio-group>
        <label>
            <input type="radio" name="rad" mbsc-radio data-label="Radio 1" checked />
        </label>
        <label>
            <input type="radio" name="rad" mbsc-radio data-label="Radio 2" />
        </label>
    </div>
    <label>
        <input mbsc-stepper data-label="Stepper" />
    </label>
    <div class="mbsc-button-group-block">
        <button mbsc-button>Button</button>
    </div>
    <div mbsc-segmented-group>
        <label>
            Segmented 1
            <input mbsc-segmented name="seg" type="radio">
        </label>
        <label>
            Segmented 2
            <input mbsc-segmented name="seg" type="radio">
        </label>
    </div>
</div>
```

## Implementation notes

- `theme` selects the base theme applied to every component instance: `'ios'`, `'material'`, or `'windows'`.
- `themeVariant` selects the light/dark variant: `'light'` or `'dark'`; setting it to `'auto'` follows the OS/browser color-scheme preference instead of a fixed value.
- A custom theme is applied by passing a custom theme name to `theme` (e.g. `'material-indigo'`, `'ios-gray'`, `'windows-yellow'`) - these names come from the Theme Builder export or a custom Sass build, not a separate option.
- `theme`/`themeVariant` are global settings: JS/jQuery applies them via `mobiscroll.setOptions({ theme, themeVariant })` before initializing components, or per-instance on an existing instance - JS calls `instance.setOptions({ theme, themeVariant })` directly on the value captured from the init call, jQuery instead chains `.mobiscroll('setOptions', { theme, themeVariant })`; React/Angular/Vue apply them via each framework's global `setOptions({ theme, themeVariant })` call (same import used for locale) since `theme`/`themeVariant` are not per-component props in the framework wrappers.
- Changing the theme at runtime re-applies `setOptions({ theme: newTheme })` (and `{ themeVariant: newVariant }`) to every already-rendered instance - the demo does this to every visible input, select, switch, checkbox, radio group, stepper, button, and segmented control on toggle.
- Deeper customization beyond the four base themes and light/dark variants is done externally, through the Theme Builder (colors) or custom Sass/CSS overrides - neither is a runtime option.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation