主题与样式
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 {
/** 主题色 **/
--uv-primary-color: #3480f9;
--uv-color-white: #fff;
--uv-color-black: #000;
/** 字体相关 **/
--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);
/** 布局相关 **/
--uv-header-height: 56px;
--uv-container-background: #f4f5f7;
--uv-page-shadow: rgba(0, 0, 0, 0.06) 0 0 10px 0,
rgba(0, 0, 0, 0.04) 0 0 0 1px;
/** 边框与阴影 **/
--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);
/** 圆角 **/
--uv-radius: 3px;
--uv-radius-medium: 5px;
/** 弹出层 **/
--uv-popup-max-height: max(60vh, 180px);
--uv-mask-color: transparent;
/** 滚动条 **/
--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);
}暗色主题（CSS 变量）
[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;
}变量说明与分组
- 主题色：
--uv-primary-color - 基础色：
--uv-color-white、--uv-color-black - 字体与文本：
--uv-font-family、--uv-font-size、--uv-font-size-small、--uv-text-color、--uv-text-color-light - 布局背景与阴影：
--uv-container-background、--uv-page-shadow - 边框与阴影：
--uv-border-color、--uv-border-color-light、--uv-shadow - 圆角：
--uv-radius、--uv-radius-medium - 弹出层：
--uv-popup-max-height、--uv-mask-color - 滚动条：
--uv-scrollbar-size、--uv-scrollbar-thumb-color、--uv-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 {
--uv-primary-color: #ff4444; /* 修改主题色 */
--uv-container-background: #f7f8fa; /* 修改背景 */
--uv-scrollbar-size: 8px; /* 修改滚动条尺寸 */
}
/* 暗色下的局部覆盖 */
html[theme-mode='dark'] .viewer-theme {
--uv-text-color: #eaeff4;
--uv-border-color: #31363b;
}
</style>常见自定义
- 修改主题色：
--uv-primary-color - 调整字体大小：
--uv-font-size、--uv-font-size-small - 调整容器背景：
--uv-container-background - 调整滚动条外观：
--uv-scrollbar-*