主题定制

:root {
  /* 主题色 */
  --umo-primary-color: #3480f9;
  --umo-color-white: #fff;
  --umo-color-black: #000;
 
  /* 警示颜色 */
  --umo-warning-color: #f6913e;
  --umo-error-color: #f5433a;
 
  /* 导航栏高度 */
  --umo-navbar-height: 52px;
 
  /* 容器背景 */
  --umo-container-background: #f7f8f9;
  --umo-container-background-light: #fff;
 
  /* 文本选中时的背景颜色 */
  --umo-text-selection-background: #94cfff;
 
  /* 字体相关 */
  --umo-font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --umo-font-size: 14px;
  --umo-font-size-small: 12px;
  --umo-text-color: #222;
  --umo-text-color-light: #999;
  --umo-text-color-disabled: #a7abac;
 
  /* 按钮 */
  --umo-button-color: #384259;
  --umo-button-icon-color: #596170;
  --umo-button-background: #f0f3f6;
  --umo-button-hover-background: #e8ecf0;
  --umo-button-active-background: #e2e7ee;
  --umo-button-active-color: var(--umo-primary-color);
  --umo-button-disabled-opacity: 0.45;
 
  /* 边框 */
  --umo-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  --umo-border: solid 0.5px #ddd;
  --umo-border-dark: solid 0.5px #ccc;
  --umo-border-light: solid 0.5px #eee;
 
  /* 圆角 */
  --umo-radius: 5px;
  --umo-radius-medium: 9px;
 
  /* 动效节奏 */
  --umo-motion-duration-fast: 180ms;
  --umo-motion-duration-base: 220ms;
  --umo-motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --umo-interactive-duration: var(--umo-motion-duration-fast);
  --umo-interactive-ease: var(--umo-motion-ease-standard);
 
  /* 弹出层 */
  --umo-popup-title-color: var(--umo-text-color-light);
  --umo-popup-content-padding: 18px;
  --umo-popup-max-height: max(60vh, 320px);
  --umo-tooltip-content-padding: 6px 10px;
  --umo-mask-color: rgba(0, 0, 0, 0.15);
 
  /* 编辑器 */
  --umo-content-placeholder-color: #999;
  --umo-content-text-color: #000;
  --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;
}
 
[theme-mode='dark'] {
  /* 主题色 */
  --umo-color-white: #232529;
  --umo-color-black: #fff;
 
  /* 警示颜色 */
  --umo-warning-color: rgb(207, 110, 45);
  --umo-error-color: rgb(198, 71, 81);
 
  /* 背景颜色 */
  --umo-container-background: #363a3e;
  --umo-container-background-light: #2c2f33;
 
  /* 字体相关 */
  --umo-text-color: rgba(255, 255, 255, 0.9);
  --umo-text-color-light: rgba(255, 255, 255, 0.7);
  --umo-text-color-disabled: rgba(255, 255, 255, 0.5);
 
  /* 按钮 */
  --umo-button-color: #bcc6de;
  --umo-button-icon-color: #bcc6de;
  --umo-button-background: #1c1e20;
  --umo-button-hover-background: #2b2c32;
  --umo-button-active-background: #454a54;
 
  /* 边框 */
  --umo-border: solid 0.5px rgba(255, 255, 255, 0.1);
  --umo-border-dark: solid 0.5px rgba(255, 255, 255, 0.2);
  --umo-border-light: solid 0.5px rgba(255, 255, 255, 0.06);
}

<template>
  <div class="theme-demo">
    <umo-editor v-bind="options" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const options = ref({
  async onSave() {
    return '保存成功'
  },
})
</script>
 
<style>
.theme-demo {
  --umo-primary-color: #e53935;
  --umo-button-background: #f8f3f3;
  --umo-navbar-height: 56px;
}
</style>