Custom Themes
The main theme variables of Umo Editor are declared using CSS Variables. We recommend personalizing your theme configuration by replacing CSS Variables.
CSS Variables
Below are all available CSS Variables. You can view the complete list of CSS Variables by clicking here.
:root {
/* Basic colors */
--umo-primary-color: #015beb;
--umo-color-white: #fff;
--umo-color-black: #000;
/* Warning colors */
--umo-warning-color: #f6913e;
--umo-error-color: #ef3f35;
/* Background colors */
--umo-container-background: #f4f5f7;
--umo-button-hover-background: #f1f3f5;
/* Font related */
--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);
/* Corners */
--umo-radius: 3px;
--umo-radius-medium: 5px;
/* Popup layer */
--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-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);
}Example
<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>Online Customization
You can visit Playground, switch to the “Themes” tab in the settings panel on the right, modify the values of CSS Variables, and preview the theme effects immediately.