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
<Popup
theme="ios "
themeVariant="light "
/>
Welcome to our website!
Have fun navigating through the demos.
JSXTSXCSS
import { Button, Page, Popup, setOptions } from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [isPopupOpen, setPopupOpen] = useState(false);
const [myAnchor, setAnchor] = useState();
const buttonRef = useRef(null);
const openPopup = useCallback(() => {
setAnchor(buttonRef.current.nativeElement);
setPopupOpen(true);
}, []);
return (
<Page>
<div className="mbsc-button-group-block">
<Button ref={buttonRef} onClick={openPopup}>
Open popup
</Button>
</div>
<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={myAnchor}
buttons={['ok', 'cancel']}
isOpen={isPopupOpen}
onClose={() => setPopupOpen(false)}
>
<div className="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</Popup>
</Page>
);
}
export default App;
import { Button, Page, Popup, setOptions } from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [isPopupOpen, setPopupOpen] = useState<boolean>(false);
const [myAnchor, setAnchor] = useState<HTMLElement>();
const buttonRef = useRef<Button>(null);
const openPopup = useCallback(() => {
setAnchor(buttonRef.current!.nativeElement);
setPopupOpen(true);
}, []);
return (
<Page>
<div className="mbsc-button-group-block">
<Button ref={buttonRef} onClick={openPopup}>
Open popup
</Button>
</div>
<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={myAnchor}
buttons={['ok', 'cancel']}
isOpen={isPopupOpen}
onClose={() => setPopupOpen(false)}
>
<div className="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</Popup>
</Page>
);
}
export default App;
/* style */