How to Add Dark Mode to a WYSIWYG Editor (v2.0.10) — RayEditor Guide

Why Dark Mode Matters for WYSIWYG Editors

Dark mode is now a baseline user expectation. Operating systems, browsers, and apps all expose a dark theme. A WYSIWYG editor that only works in light mode creates a jarring, eye-straining experience for users who have enabled system-wide dark mode — especially during long writing sessions.

Despite this, dark mode in a WYSIWYG editor is harder than it sounds. The toolbar, dropdowns, slash command palette, link modals, table pickers, emoji pickers, and the content area itself all need to adapt. Most editors charge for this feature. RayEditor includes it for free.

Dark Mode Options in RayEditor

RayEditor supports three dark mode values:

• 'light' — always light theme regardless of OS setting
• 'dark' — always dark theme
• 'auto' — follows OS preference using prefers-color-scheme

Setting Dark Mode on Initialization

import { RayEditor } from '@rohanyeole/ray-editor';
import '@rohanyeole/ray-editor/dist/ray-editor.css';

// Always dark
const editor = new RayEditor(document.getElementById('editor'), {
  darkMode: 'dark'
});

// Follow OS preference
const editor2 = new RayEditor(document.getElementById('editor2'), {
  darkMode: 'auto'
});

Toggling Dark Mode Programmatically

// Toggle with a button
document.getElementById('theme-btn').addEventListener('click', () => {
  const current = editor.getTheme(); // returns 'light' or 'dark'
  editor.setTheme(current === 'dark' ? 'light' : 'dark');
});

// Listen for theme changes
editor.on('theme:change', ({ theme }) => {
  document.body.classList.toggle('dark', theme === 'dark');
});

React Dark Mode

const [dark, setDark] = React.useState(false);

<RayEditor
  value={content}
  onChange={setContent}
  options={{ darkMode: dark ? 'dark' : 'light' }}
/>
<button onClick={() => setDark(d => !d)}>Toggle</button>

Vue Dark Mode

<RayEditorVue
  v-model="content"
  :options="{ darkMode: isDark ? 'dark' : 'light' }"
/>

Custom Dark Mode Colors

RayEditor uses CSS custom properties. Override any variable scoped to [data-ray-theme="dark"]:

/* In your own CSS */
[data-ray-theme="dark"] {
  --ray-bg: #1a1a2e;
  --ray-surface: #16213e;
  --ray-text: #e0e0e0;
  --ray-accent: #f97316;
}

Which Editors Include Free Dark Mode?

Conclusion

Adding dark mode to a WYSIWYG editor requires consistent theming across every UI element. RayEditor handles all of this for you — all three modes (light, dark, auto), programmatic toggling, and full CSS variable customization. It is the only free WYSIWYG editor that includes dark mode without a paid plan in 2026.