Theming capabilities
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
lightanddarkvariant. Setting thethemeVariantto'auto'will switch based on system settings. - Custom themes: Use the theme builder 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.
Demo
Pick a base theme
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 or Sass to customize themes
theme: 'ios ',
themeVariant: 'light ' Welcome to our website!
Have fun navigating through the demos.
JSHTMLCSS
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
var popup = mobiscroll.popup('#demo-theming-popup', {
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
display: 'anchored',
anchor: document.getElementById('demo-popup-open-btn'),
buttons: ['ok', 'cancel'],
});
document.getElementById('demo-popup-open-btn').addEventListener('click', function () {
popup.open();
return false;
});
<div class="mbsc-button-group-block">
<button id="demo-popup-open-btn" mbsc-button>Open popup</button>
</div>
<div id="demo-theming-popup" style="display: none;">
<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>
</div>
/* style */