---
title: "Vue Popup Theming capabilities Example | Mobiscroll"
component: "Popup"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/popup/themes-ios-material-windows"
---

# Theming capabilities - Vue Popup demo

Vue Popup widget with iOS, Material, Windows look & feel. Customize colors and styling with theme builder. For Vue and Nuxt.

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

## Description

The look and feel of the popover 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

- This demo shows a popup which can be opened and closed with buttons.
- **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 popup 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.
- **Opening and closing** Buttons programmatically open and close the popup.
- **Modal layout** The popup appears as a centered modal with a custom layout and content.
- **Custom content** The popup contains a custom image or logo, a heading, and descriptive text.
- **Button actions** A `Cancel` and an `Ok` button dismisses the popup.
- **Visual separation** A modal overlay and shadow separate the popup from the underlying content.

## Best for

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

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

With "Material":

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

With "Windows":

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

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/popup/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/popup/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/vue/popup/api#opt-display) - option
- [`anchor`](https://mobiscroll.com/docs/vue/popup/api#opt-anchor) - option
- [`isOpen`](https://mobiscroll.com/docs/vue/popup/api#opt-isOpen) - option
- [`buttons`](https://mobiscroll.com/docs/vue/popup/api#opt-buttons) - option
- [`close`](https://mobiscroll.com/docs/vue/popup/api#event-onClose) - event

## Code

### SFC JS

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

import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const buttonRef = ref(null)
const isPopupOpen = ref(false)
const myAnchor = ref()

function openPopup() {
  myAnchor.value = buttonRef.value.instance.nativeElement
  isPopupOpen.value = true
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-button-group-block">
      <MbscButton ref="buttonRef" @click="openPopup">Open popup</MbscButton>
    </div>

    <!-- 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 -->
    <MbscPopup
      display="anchored"
      :anchor="myAnchor"
      theme="material"
      themeVariant="dark"
      :isOpen="isPopupOpen"
      :buttons="['ok', 'cancel']"
      @close="isPopupOpen = false"
    >
      <div class="mbsc-align-center mbsc-padding">
        <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
        <h4>Welcome to our website!</h4>
        <p>Have fun navigating through the demos.</p>
      </div>
    </MbscPopup>
  </MbscPage>
</template>

<style>
/* style */
</style>
```

### SFC TS

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

import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const isPopupOpen = ref<boolean>(false)
const buttonRef = ref<any>(null)
const myAnchor = ref<any>(null)

function openPopup() {
  myAnchor.value = buttonRef.value.instance.nativeElement
  isPopupOpen.value = true
}
</script>

<template>
  <MbscPage>
    <div class="mbsc-button-group-block">
      <MbscButton ref="buttonRef" @click="openPopup">Open popup</MbscButton>
    </div>

    <!-- 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 -->
    <MbscPopup
      display="anchored"
      :anchor="myAnchor"
      theme="material"
      themeVariant="dark"
      :isOpen="isPopupOpen"
      :buttons="['ok', 'cancel']"
      @close="isPopupOpen = false"
    >
      <div class="mbsc-align-center mbsc-padding">
        <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
        <h4>Welcome to our website!</h4>
        <p>Have fun navigating through the demos.</p>
      </div>
    </MbscPopup>
  </MbscPage>
</template>

<style>
/* style */
</style>
```

## Implementation notes

- `theme` accepts `'ios'`, `'material'`, `'windows'`, or `'auto'`; `'auto'` picks the base theme automatically based on the detected platform.
- `themeVariant` accepts `'light'`, `'dark'`, or `'auto'`; `'auto'` follows the active system theme.
- `display: 'anchored'` anchors the popup to a trigger element instead of centering it; `anchor` supplies the DOM element it positions against.
- `buttons: ['ok', 'cancel']` renders Ok/Cancel action buttons in the popup's footer.
- `showOverlay: false` removes the dimmed backdrop behind the popup so surrounding content stays visible while it's open.
- Opening is imperative in JS/jQuery and Angular, declarative in React/Vue: JS captures the popup instance directly from the return value of `mobiscroll.popup(...)`; jQuery instead calls `.mobiscroll('getInst')` once to get it; either way, `anchor` is set on the trigger button and `.open()` is called on click; Angular keeps a `@ViewChild` reference (`popup: MbscPopup`) with `[anchor]` bound in the template and calls `popup.open()` from the click handler; React and Vue instead bind the popup's `isOpen`/`:isOpen` prop to state the click handler sets to `true` (together with an `anchor`/`:anchor` state update from the clicked element), and reset that state through an `onClose`/`@close` callback.
- Changing the base theme or variant at runtime is imperative in JS/jQuery - call `.setOptions({ theme })` or `.setOptions({ themeVariant })` on the popup instance (and on any other themed component instances) - since `theme`/`themeVariant` are otherwise fixed props/options set once at initialization in React, Angular, and Vue.
- `theme` and `themeVariant` are top-level options on the `Popup`/`MbscPopup` component (prop in React/Vue, `[options]` field in Angular, `.popup({...})` config in JS/jQuery) - they are not scoped to a single instance and are commonly set once globally via `setOptions()` from the framework package instead.

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