---
title: "JQuery Select Theming capabilities Example | Mobiscroll"
component: "Select"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/select/themes-ios-material-windows"
---

# Theming capabilities - jQuery Select demo

JQuery Select scroller with iOS, Material, Windows look & feel. Customize colors and styling with theme builder.

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

## Description

The look and feel of the select can be deeply 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 CSS:** If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.

## What this demo shows

- An inline, single-value select is displayed alongside theme controls for previewing different appearances in the same layout.
- **Theme controls:** A segmented control switches between the `iOS`, `Material`, and `Windows` base themes, with `iOS` selected by default.
- **Theme variant:** A dark-theme switch is enabled by default, showing the select with the dark theme variant.
- **Custom theme option:** A separate switch for Theme Builder or Sass-based customization is available and disabled by default.
- **Inline select:** The picker is embedded directly in the page without an input by using inline display mode.
- **Picker content:** The available options are displayed directly on the page.
- **Hover state:** Hovering over an option highlights it in the picker.
- **Selection:** Selecting an option marks it with a checkmark to indicate the current value.

## Best for

- **Theme comparison:** Comparing the same select component across the `iOS`, `Material`, and `Windows` base themes.
- **Light and dark theme previews:** Checking the select's appearance with light and dark theme variants.
- **Branded select experiences:** Exploring how Theme Builder, Sass, or custom CSS can extend a base theme 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/jquery/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'
```

## API used in this demo

- [`display`](https://mobiscroll.com/docs/jquery/select/api#opt-display) - option
- [`theme`](https://mobiscroll.com/docs/jquery/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/select/api#opt-themeVariant) - option

## Code

### JS

```js
mobiscroll.setOptions({
});

$(function () {
  $('#demo').mobiscroll().select({
    display: 'inline',
    theme: 'material', // Can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform
    themeVariant: 'dark', // Can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme
  });
});
```

### HTML

```html
<select id="demo">
    <option value="atl">Atlanta</option>
    <option value="ber">Berlin</option>
    <option value="bos">Boston</option>
    <option value="chi">Chicago</option>
    <option value="lon">London</option>
    <option value="la">Los Angeles</option>
    <option value="ny">New York</option>
    <option value="par">Paris</option>
    <option value="sf">San Francisco</option>
</select>
```

## Implementation notes

- `theme` selects the base visual theme by name: `'ios'`, `'material'`, or `'windows'`. It can be changed at runtime via `.setOptions({ theme: '<name>' })` on the select instance.
- `themeVariant` selects `'light'`, `'dark'`, or `'auto'` (follows system/OS dark-mode setting); combined with `theme`, e.g. `theme: 'ios'` + `themeVariant: 'dark'`. Also settable at runtime through `.setOptions({ themeVariant })`.
- A custom (Theme Builder-generated) theme is applied by passing its generated theme name as the `theme` value instead of a base name, e.g. `'material-indigo'`, `'windows-yellow'`, `'ios-gray'` - in that mode `themeVariant` is not set alongside it, since the custom theme name already encodes light/dark.
- `display: 'inline'` renders the option list directly on the page (no separate trigger input), used here so the theme changes are visible immediately without opening a popup.
- Per framework: JS/jQuery pass `theme`/`themeVariant` inside `.select({ ... })` at init and update them later via `.setOptions({ theme, themeVariant })`; React sets `theme`/`themeVariant` as props on `<Select>`; Angular binds `theme`/`themeVariant` as plain (non-bracketed) string attributes on `<mbsc-select>` since they're static per render; Vue sets `theme`/`themeVariant` as plain string attributes on `<MbscSelect>`.
- Beyond the `theme`/`themeVariant` options, deeper customization (brand colors, spacing) is done outside the component API - through the Theme Builder tool or Sass variable overrides - and isn't controlled through select instance options.

## 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-jquery.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 jquery
   ```

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 jquery --trial`.

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