Themes

Umo Office Viewer declares its theme tokens via CSS variables. We recommend customizing appearance by overriding CSS variables.

Theme Mode

theme: 'light' | 'dark' | 'auto'
- light: light theme
- dark: dark theme
- auto: follow system dark/light mode and sync automatically when it changes

Internal behavior:

When theme !== 'auto', the html element will have theme-mode="light|dark"
When theme === 'auto', it listens to (prefers-color-scheme: dark) and switches dynamically

You can also switch via methods:

viewerRef.value?.setTheme('dark')
viewerRef.value?.setTheme('auto')

Default Theme (CSS Variables)

:root {
  /** Primary **/
  --uov-primary-color: #3480f9;
  --uov-color-white: #fff;
  --uov-color-black: #000;
 
  /** Typography **/
  --uov-font-family:
    helvetica neue, helvetica, pingfang sc, hiragino sans gb, microsoft yahei,
    simsun, sans-serif;
  --uov-font-size: 14px;
  --uov-font-size-small: 12px;
  --uov-text-color: rgb(51, 54, 57);
  --uov-text-color-light: rgba(0, 0, 0, 0.5);
 
  /** Layout **/
  --uov-header-height: 56px;
  --uov-container-background: #f4f5f7;
  --uov-page-shadow:
    rgba(0, 0, 0, 0.06) 0 0 10px 0, rgba(0, 0, 0, 0.04) 0 0 0 1px;
 
  /** Borders & shadows **/
  --uov-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%);
  --uov-border-color: rgba(0, 0, 0, 0.08);
  --uov-border-color-light: rgba(0, 0, 0, 0.05);
 
  /** Radius **/
  --uov-radius: 3px;
  --uov-radius-medium: 5px;
 
  /** Popups **/
  --uov-popup-max-height: max(60vh, 180px);
  --uov-mask-color: transparent;
 
  /** Scrollbar **/
  --uov-scrollbar-size: 10px;
  --uov-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
  --uov-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
}

Dark Theme (CSS Variables)

[theme-mode='dark'] {
  --uov-color-white: #17171a;
  --uov-color-black: #fff;
  --uov-text-color: #ddd;
  --uov-text-color-light: #bbb;
  --uov-border-color: rgba(255, 255, 255, 0.15);
  --uov-border-color-dark: rgba(255, 255, 255, 0.2);
  --uov-border-color-light: rgba(255, 255, 255, 0.08);
  --uov-container-background: #2a2b2d;
}

Groups

Primary: --uov-primary-color
Base colors: --uov-color-white, --uov-color-black
Typography: --uov-font-family, --uov-font-size, --uov-font-size-small, --uov-text-color, --uov-text-color-light
Background & page shadow: --uov-container-background, --uov-page-shadow
Borders & shadows: --uov-border-color, --uov-border-color-light, --uov-shadow
Radius: --uov-radius, --uov-radius-medium
Popups: --uov-popup-max-height, --uov-mask-color
Scrollbar: --uov-scrollbar-size, --uov-scrollbar-thumb-color, --uov-scrollbar-thumb-hover-color

Overriding Variables

Override variables within a container scope. Use a local class to avoid affecting global styles.

<template>
  <div class="viewer-theme">
    <umo-office-viewer :theme="theme" />
  </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
const theme = ref<'light' | 'dark' | 'auto'>('light')
</script>
 
<style>
.viewer-theme {
  --uov-primary-color: #ff4444;
  --uov-container-background: #f7f8fa;
  --uov-scrollbar-size: 8px;
}
 
html[theme-mode='dark'] .viewer-theme {
  --uov-text-color: #eaeff4;
  --uov-border-color: #31363b;
}
</style>

Common Variables

Primary color: --uov-primary-color
Font size: --uov-font-size, --uov-font-size-small
Container background: --uov-container-background
Scrollbar styling: --uov-scrollbar-*

Events Watermark & Password