vex (original) (raw)
Themes
To use a builtin theme, you must include the theme style sheet, and set vex className to match:
<link rel="stylesheet" href="vex-theme-default.css" />
<script>vex.defaultOptions.className = 'vex-theme-default';</script>
At the moment, there are 6 themes:
| Name | className | |
|---|---|---|
| Default | vex-theme-default | Example |
| Operating System | vex-theme-os | Example |
| Plain | vex-theme-plain | Example |
| Wireframe | vex-theme-wireframe | Example |
| Flat Attack! | vex-theme-flat-attack | Example |
| Top | vex-theme-top | Example |
| Bottom Right Corner | vex-theme-bottom-right-corner | Example |
Instead of setting vex.defaultOptions.className, you could instead set the className option when opening a vex. Here's an example of that.
Inline Theme Example
vex.defaultOptions.className = 'vex-theme-os'
vex.dialog.alert({
message: 'Testing the wireframe theme.',
className: 'vex-theme-wireframe' // Overwrites defaultOptions
})