Custom Themes

Umo Viewer’s primary theme variables are declared using CSS Variables. We recommend customizing themes by replacing CSS variables.

Theme Configuration

Umo Viewer supports a dark theme. See Theme Configuration.

CSS Variables

Below are all available CSS variables. Click here to view the full list of CSS variables.

/* Default Theme */
```css
:root {
  /** Theme Colors **/
  --uv-primary-color: #3480f9;
  --uv-color-white: #fff;
  --uv-color-black: #000;
 
  /** Font **/
  --uv-font-family:
    helvetica neue, helvetica, pingfang sc, hiragino sans gb, microsoft yahei,
    simsun, sans-serif;
  --uv-font-size: 14px;
  --uv-font-size-small: 12px;
  --uv-text-color: rgb(51, 54, 57);
  --uv-text-color-light: rgba(0, 0, 0, 0.5);
 
  /** Border **/
  --uv-shadow:
    0 3px 14px 2px rgba(0, 0, 0, 0.03), 0 8px 10px 1px rgba(0, 0, 0, 4%),
    0 5px 5px -3px rgba(0, 0, 0, 8%);
  --uv-border-color: rgba(0, 0, 0, 0.08);
  --uv-border-color-light: rgba(0, 0, 0, 0.05);
 
  /** Border Radius **/
  --uv-radius: 3px;
  --uv-radius-medium: 5px;
 
  /** Popup **/
  --uv-popup-content-padding: 12px;
  --uv-popup-max-height: max(60vh, 180px);
  --uv-tooltip-content-padding: 6px 10px;
  --uv-mask-color: transparent;
 
  /** Layout **/
  --uv-header-height: 56px;
  --uv-container-background: #f4f5f7;
  --uv-page-shadow:
    rgba(0, 0, 0, 0.06) 0px 0px 10px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px;
 
  /** Scrollbar **/
  --uv-scrollbar-size: 6px;
  --uv-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --uv-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
}
 
/** Dark Theme **/
[theme-mode='dark'] {
  --uv-color-white: #17171a;
  --uv-color-black: #fff;
  --uv-text-color: #ddd;
  --uv-text-color-light: #bbb;
  --uv-border-color: rgba(255, 255, 255, 0.15);
  --uv-border-color-dark: rgba(255, 255, 255, 0.2);
  --uv-border-color-light: rgba(255, 255, 255, 0.08);
  --uv-container-background: #2a2b2d;
}

Example

<template>
  <div class="theme-demo">
    <umo-editor />
  </div>
</template>
 
<script setup>
import { UmoViewer } from '@umoteam/viewer'
</script>
 
<style>
.theme-demo {
  --umo-primary-color: red;
  /* ... */
}
</style>

Online Customization

You can visit https://www.umodoc.com/en/demo?target=viewer&pane=themes, switch to the “Theme Settings” tab in the right-side settings panel, and modify the CSS variable values to preview the theme effects.

Events Introduction