自定义主题
Umo Editor 主要的主题变量使用 CSS Variables 声明,我们推荐使用替换 CSS Variables 的方式来进行个性化的主题配置。
CSS Variables
以下是所有可用的 CSS Variables,点击此处 可查看完整的 CSS Variables 列表。
:root {
/* 基础颜色 */
--umo-primary-color: #015beb;
--umo-color-white: #fff;
--umo-color-black: #000;
/* 警示颜色 */
--umo-warning-color: #f6913e;
--umo-error-color: #ef3f35;
/* 背景颜色 */
--umo-container-background: #f4f5f7;
--umo-button-hover-background: #f1f3f5;
/* 字体相关 */
--umo-font-family: helvetica neue, helvetica, pingfang sc, hiragino sans gb, microsoft yahei, simsun, sans-serif;
--umo-font-size: 14px;
--umo-font-size-small: 12px;
--umo-text-color: rgb(51, 54, 57);
--umo-text-color-light: rgba(0, 0, 0, 0.5);
--umo-text-color-disabled: #a7abac;
/* 边框 */
--umo-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%);
--umo-border-color: rgba(0, 0, 0, 0.08);
--umo-border-color-dark: #ddd;
--umo-border-color-light: rgba(0, 0, 0, 0.05);
/* 圆角 */
--umo-radius: 3px;
--umo-radius-medium: 5px;
/* 弹出层 */
--umo-popup-content-padding: 12px;
--umo-popup-max-height: max(60vh, 180px);
--umo-tooltip-content-padding: 6px 10px;
--umo-mask-color: transparent;
/* 编辑器 */
--umo-content-placeholder-color: #999;
--umo-content-node-border: #e7e7e7;
--umo-content-node-radius: var(--umo-radius);
--umo-content-node-bottom: 0.75em;
--umo-content-node-selected-background: #f5f8fc;
--umo-content-table-border-color: #333;
--umo-content-table-thead-background: #f1f3f5;
--umo-content-table-selected-background: rgba(200, 200, 255, 0.4);
--umo-content-line-number-color: #e7e8ea;
--umo-content-search-result-background: #fefc7ef2;
--umo-content-search-result-current-background: #0dff00c3;
--umo-content-invisible-break-color: rgb(78, 139, 252);
--umo-content-code-color: var(--umo-primary-color);
--umo-content-code-background: #f1f3f5;
--umo-content-code-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
/* 滚动条 */
--umo-scrollbar-size: 4px;
--umo-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
--umo-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
}
示例
<template>
<div class="theme-demo">
<umo-editor />
</div>
</template>
<script setup>
import { UmoEditor } from 'umo-editor'
</script>
<style>
.theme-demo:root {
--umo-primary-color: red;
/* ... */
}
</style>
在线定制
您可以访问 https://demo.umodoc.com/editor?tab=themes&lang=cn ,在右侧设置面板中切换到“主题设置”选项卡,修改 CSS Variables 值,即可预览主题效果。