---
title: "React Date & Time Theming capabilities Example | Mobiscroll"
component: "Date & Time"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/datetime/themes-ios-material-windows"
---

# Theming capabilities - React Date & Time demo

React Date and time scroller with iOS, Material, Windows look & feel. Customize colors and styling with theme builder. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/datetime/themes-ios-material-windows)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/datetime/themes-ios-material-windows)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/datetime/themes-ios-material-windows)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/datetime/themes-ios-material-windows.md), [jQuery](https://demo.mobiscroll.com/jquery/datetime/themes-ios-material-windows.md), [Angular](https://demo.mobiscroll.com/angular/datetime/themes-ios-material-windows.md), [Vue](https://demo.mobiscroll.com/vue/datetime/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 wheel-style date picker is shown alongside theme controls so you can preview different date picker 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 date picker 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 picker** The example embeds the picker directly in the page without an input by using inline display mode.
- **Date selection** Separate scrollable wheels let users select the month, day, and year. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, including dates in other months or years.

## Best for

- **Theme comparison** Evaluating how the same date picker looks with the `iOS`, `Material`, and `Windows` base themes.
- **Light and dark mode previewing** Checking how a date picker 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/react/datepicker/css-variables) to customize themes

```jsx
<Datepicker
    theme="ios"
    themeVariant="light"
/>
```

With "Material":

```jsx
<Datepicker
    theme="material"
    themeVariant="light"
/>
```

With "Windows":

```jsx
<Datepicker
    theme="windows"
    themeVariant="light"
/>
```

## API used in this demo

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

## Code

### JSX

```jsx
import { Datepicker, setOptions } from '@mobiscroll/react';

setOptions({
});

function App() {
  return (
    <div>
      <Datepicker
        controls={['date']}
        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
      />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';

setOptions({
});

const App: FC = () => (
  <div>
    <Datepicker
      controls={['date']}
      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
    />
  </div>
);
export default App;
```

## Implementation notes

- Use `controls: ['date']` and `display: 'inline'` - despite living under the `datetime` view, this demo's live instance is a date-only wheel picker (no time or datetime controls are used).
- Set `theme` to `'ios'`, `'material'`, or `'windows'` to pick the base theme.
- Set `themeVariant` to `'light'` or `'dark'` to switch the variant within the chosen base theme.
- `theme` and `themeVariant` can be updated at runtime via `setOptions({ theme })` / `setOptions({ themeVariant })` on the same live picker instance rather than re-initializing it.
- `theme` also accepts a custom-named theme (e.g. `'material-indigo'`, `'windows-yellow'`, `'ios-gray'`) built on top of a base theme, settable via `setOptions({ theme: customName })`; a custom theme name already encodes its own light/dark variant, so `themeVariant` does not need to be set alongside it.

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

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

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