---
title: "Javascript Range Theme Customization Example | Mobiscroll"
component: "Range"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/range/themes-ios-material-windows"
---

# Theme Customization - JavaScript Range demo

Style the Javascript date range picker with iOS, Material, or Windows themes — switch light/dark mode or apply brand colors via the theme builder. Plain JS api for usage everywhere.

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

## Description

The look and feel of the date picker 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 month-view date range picker calendar is shown alongside theme controls so you can preview different calendar looks in the same layout.
- **Theme controls** A segmented picker lets you switch between the `iOS`, `Material`, and `Windows` base themes, with `iOS` selected by default.
- **Theme variant** A dark-theme switch is enabled by default, showing how the same calendar can be previewed in a dark variant.
- **Custom theme option** A separate switch for theme builder or Sass-based customization is present but turned off by default.
- **Inline date range picker** This example embeds the date range picker directly in the page without an input by using inline display mode.
- **Start and end inputs** Clickable inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** The month and year label in the upper-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.

## Best for

- **Theme comparison** Evaluating how the same desktop month-view calendar looks with the `iOS`, `Material`, and `Windows` base themes.
- **Light and dark mode previewing** Checking how a calendar setup behaves across light and dark theme variants.
- **Branded calendar experiences** Exploring how a base theme can be extended with 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/datepicker/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

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

## Code

### JS

```js
mobiscroll.datepicker('#demo', {
  controls: ['calendar'],
  select: 'range',
  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
<div id="demo"></div>
```

## Implementation notes

- Set `theme` to `'ios'`, `'material'`, or `'windows'` to pick the base theme on the range `Datepicker` (`select: 'range'`, `display: 'inline'`, `controls: ['calendar']`).
- Set `themeVariant` to `'light'` or `'dark'` to pick the variant of the chosen base theme, or `'auto'` to follow the system's light/dark setting.
- A custom theme is a base theme name suffixed with a color, e.g. `'ios-gray'`, `'material-indigo'`, `'windows-yellow'` - built with the [theme builder](https://mobiscroll.com/themebuilder) or Sass overrides - and is passed to the same `theme` option in place of the base name; `themeVariant` is not combined with a custom theme name.
- React passes `theme`/`themeVariant` as props; Angular and Vue bind them the same way as plain attributes (`theme="ios"`, `themeVariant="light"`); JS/jQuery set `theme`/`themeVariant` directly in the options object.
- Both options can be changed at runtime via `.setOptions({ theme: newTheme })` / `.setOptions({ themeVariant: newVariant })` (JS/jQuery) or by updating the bound prop/state in React/Angular/Vue, and the calendar re-renders with the new look.

## 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

## Related demos

- Next: [Custom Shaped Day Marks](https://demo.mobiscroll.com/javascript/range/customize-marked-day-shapes.md) - Customize day mark shapes on the Javascript date range picker — show triangles, squares, and dots using CSS overrides or a custom mark CSS class.