Themes

The main theme variables of Umo Editor are declared using CSS Variables. We recommend personalizing your theme configuration by replacing CSS variables.

Dark Mode

Starting from version v2.1.0, Umo Editor supports a dark theme, which you can experience through the following link: https://demo.umodoc.com/editor?theme=dark&lang=en-US.

Theme Configuration

Refer to Opitons .

Theme Methods

Refer to Methods.

Theme Events

Refer to Events.

CSS Variables

Below are all available CSS Variables. You can view the complete list of CSS Variables by clicking here.

/* Default Theme */
:root {
  /* Theme Colors */
  --umo-primary-color: #3480f9;
  --umo-color-white: #fff;
  --umo-color-black: #000;
 
  /* Alert Colors */
  --umo-warning-color: #f6913e;
  --umo-error-color: #ef3f35;
 
  /* Background Colors */
  --umo-container-background: #f4f5f7;
  --umo-button-hover-background: #f1f3f5;
  /** Background color when text is selected **/
  --umo-text-selection-background: #94cfff;
 
  /* Typography */
  --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;
 
  /* Borders */
  --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);
 
  /* Rounded Corners */
  --umo-radius: 3px;
  --umo-radius-medium: 5px;
 
  /* Popups */
  --umo-popup-content-padding: 12px;
  --umo-popup-max-height: max(60vh, 180px);
  --umo-tooltip-content-padding: 6px 10px;
  --umo-mask-color: transparent;
 
  /* Editor */
  --umo-content-placeholder-color: #999;
  --umo-content-text-color: #333;
  --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;
 
  /* Scrollbar */
  --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);
}
 
/* Dark Theme */
[theme-mode='dark'] {
  /* Theme Colors & Backgrounds Adjusted for Dark Mode */
  --umo-color-white: #17171a;
  --umo-color-black: #fff;
  --umo-container-background: #2a2b2d;
  --umo-button-hover-background: #2c2c2c;
  --umo-text-color: #ddd;
  --umo-border-color: rgba(255, 255, 255, 0.15);
  --umo-content-text-color: #000;
  --umo-scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
}

Example

<template>
  <div class="theme-demo">
    <umo-editor />
  </div>
</template>
 
<script setup>
import { UmoEditor } from 'umo-editor'
</script>
 
<style>
.theme-demo {
  --umo-primary-color: red;
  /* ... */
}
</style>

Online Customization

You can visit Playground, switch to the “Themes” tab in the settings panel on the right, modify the values of Variables, and preview the theme effects immediately.

Tiptap Editor Slots