---
title: "Vue Calendar Themes — iOS, Material & Windows Example | Mobiscroll"
component: "Calendar"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/calendar/themes-ios-material-windows"
---

# Themes — iOS, Material & Windows - Vue Calendar demo

Style a Vue calendar date picker with iOS, Material, or Windows themes — switch light/dark mode, use the theme builder, or apply custom CSS. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/calendar/themes-ios-material-windows)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/datepicker/calendar/themes-ios-material-windows)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/datepicker/calendar/themes-ios-material-windows)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/themes-ios-material-windows.md), [jQuery](https://demo.mobiscroll.com/jquery/calendar/themes-ios-material-windows.md), [Angular](https://demo.mobiscroll.com/angular/calendar/themes-ios-material-windows.md), [React](https://demo.mobiscroll.com/react/calendar/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 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.
- **Header navigation** The month and year label in the upper-left corner opens month and year selection controls. The previous and next arrow buttons on the right move 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** Users can also change the displayed month by dragging the calendar left or right.
- **Day cell states** Hovering over a day gives its number a gray background. Selecting a day gives its number a blue background. 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 the 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/vue/datepicker/css-variables) to customize themes

```vue
<template>
  <MbscDatepicker
    theme="ios"
    themeVariant="light"
  />
</template>
```

With "Material":

```vue
<template>
  <MbscDatepicker
    theme="material"
    themeVariant="light"
  />
</template>
```

With "Windows":

```vue
<template>
  <MbscDatepicker
    theme="windows"
    themeVariant="light"
  />
</template>
```

## API used in this demo

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

## Code

### SFC JS

```vue
<script setup>
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'

setOptions({
})
</script>

<template>
  <!-- theme: can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform -->
  <!-- themeVariant: can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme -->
  <MbscDatepicker :controls="['calendar']" display="inline" theme="material" themeVariant="dark" />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'

setOptions({
})
</script>

<template>
  <!-- theme: can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform -->
  <!-- themeVariant: can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme -->
  <MbscDatepicker :controls="['calendar']" display="inline" theme="material" themeVariant="dark" />
</template>
```

## Implementation notes

- Use `controls: ['calendar']` and `display: 'inline'`.
- Set `theme` to `'ios'`, `'material'`, `'windows'`, or `'auto'` (platform-based) to pick the base theme.
- Set `themeVariant` to `'light'`, `'dark'`, or `'auto'` (system-setting-based) to switch the variant within the chosen base theme.
- Update either at runtime via `setOptions({ theme })` / `setOptions({ themeVariant })` on the instance.
- For a custom/branded theme, register a custom theme name (built on top of a base theme's CSS custom properties/Sass variables) and pass that custom name as `theme` instead of one of the three built-ins.

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

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

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

## Related demos

- Next: [Custom Header](https://demo.mobiscroll.com/vue/calendar/customizing-header.md) - Customize the Vue date picker header — rearrange nav controls, add a today button, or add a week/month view switcher.