Loading...
Loading...
Custom themes, upload integration, and event callbacks for SunEditor v3.
SunEditor ships with 4 built-in themes. Import the CSS file and pass the theme name to options.
se-theme-darkse-theme-midnightse-theme-cobaltse-theme-creamimport suneditor from 'suneditor';
// 1. Import the built-in theme CSS
import 'suneditor/src/themes/dark.css';
// 2. Pass theme name to options
const editor = suneditor.create(textarea, {
theme: 'dark', // 'dark' | 'midnight' | 'cobalt' | 'cream'
});
// 3. Change theme at runtime
editor.$.ui.setTheme('midnight');
editor.$.ui.setTheme(''); // Reset to defaultEach theme defines ~130 CSS custom properties organized into categories. Override them to customize any part of the editor.
Colors for the editable content area (text, backgrounds, borders)
--se-caret-colorText cursor color--se-edit-font-colorDefault text color in editor--se-edit-background-colorEditor content background--se-edit-border-*Content area border scale (light β dark)--se-edit-anchorLink highlight color--se-edit-active / hover / outlineSelection, hover, focus outline colorsToolbar, statusbar, and outer shell styling
--se-main-background-colorToolbar & shell background--se-main-colorToolbar text/icon color--se-main-border-colorToolbar border color--se-hover-color (6 levels)6 progressive hover tone levels--se-active-color (11 levels)11 progressive active tone levelsDialog modals, dropdowns, and controller surfaces
--se-modal-background-colorModal dialog background--se-modal-colorModal text color--se-dropdown-font-colorDropdown menu text color--se-controller-*Component controller (image/video) colorsSuccess/error feedback colors and loading indicators
--se-success-color (9 levels)9-level success palette (dark β light)--se-error-color (9 levels)9-level error palette (dark β light)--se-loading-colorLoading spinner colorTotal: ~130 CSS variables per theme. Copy a built-in theme as your starting point and modify the colors.
Create a CSS file that defines all variables under your theme's selector. The class name must follow the pattern: se-theme-{name}.
Define all CSS variables under .sun-editor.se-theme-{name} and .sun-editor-editable.se-theme-{name} selectors.
/* my-theme.css */
.sun-editor.se-theme-ocean,
.sun-editor-editable.se-theme-ocean {
/* Caret & placeholder */
--se-caret-color: #e0f2fe;
--se-drag-caret-color: #38bdf8;
--se-placeholder-color: #64748b;
/* Text */
--se-edit-font-color: #e2e8f0;
--se-edit-font-pre: #94a3b8;
--se-edit-font-quote: #94a3b8;
/* Background */
--se-edit-background-color: #0f172a;
--se-edit-background-pre: #1e293b;
/* ... */
}Import the CSS file in your app and set the theme option to match your theme name.
// Import your custom theme CSS
import './my-theme.css';
const editor = suneditor.create(textarea, {
theme: 'ocean', // Must match the class name: se-theme-ocean
});