主题与样式
Umo Office Viewer 的主要主题变量通过 CSS 变量进行声明，我们推荐通过替换 CSS 变量的方式进行个性化的主题配置。
主题模式
theme: 'light' | 'dark' | 'auto'light：浅色主题dark：深色主题auto：跟随系统深/浅色；当系统主题变化时自动同步
内部实现：
- 当
theme !== 'auto'时，在html节点设置属性theme-mode="light|dark" - 当
theme === 'auto'时，监听系统媒体查询(prefers-color-scheme: dark)并动态切换
你也可以通过方法进行切换：
viewerRef.value?.setTheme('dark')
viewerRef.value?.setTheme('auto')默认主题（CSS 变量）
:root {
/** 主题色 **/
--uov-primary-color: #3480f9;
--uov-color-white: #fff;
--uov-color-black: #000;
/** 字体相关 **/
--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);
/** 布局相关 **/
--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;
/** 边框与阴影 **/
--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);
/** 圆角 **/
--uov-radius: 3px;
--uov-radius-medium: 5px;
/** 弹出层 **/
--uov-popup-max-height: max(60vh, 180px);
--uov-mask-color: transparent;
/** 滚动条 **/
--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);
}暗色主题（CSS 变量）
[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;
}变量说明与分组
- 主题色：
--uov-primary-color - 基础色：
--uov-color-white、--uov-color-black - 字体与文本：
--uov-font-family、--uov-font-size、--uov-font-size-small、--uov-text-color、--uov-text-color-light - 布局背景与阴影：
--uov-container-background、--uov-page-shadow - 边框与阴影：
--uov-border-color、--uov-border-color-light、--uov-shadow - 圆角：
--uov-radius、--uov-radius-medium - 弹出层：
--uov-popup-max-height、--uov-mask-color - 滚动条：
--uov-scrollbar-size、--uov-scrollbar-thumb-color、--uov-scrollbar-thumb-hover-color
覆盖方式与示例
在容器作用域内覆盖变量，推荐使用局部类名避免影响全局。
<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>常用 CSS 变量
- 修改主题色：
--uov-primary-color - 调整字体大小：
--uov-font-size、--uov-font-size-small - 调整容器背景：
--uov-container-background - 调整滚动条外观：
--uov-scrollbar-*