Themes and Styling

🎨 Themes & Styling

How to use built-in themes, customize colors, and style editor content with CSS.

---

🎨 Built-in Themes

Neiki's Editor ships with five themes:

Theme	Identifier	Description
Light	'light'	White background, dark text. Default.
Dark	'dark'	Dark background, light text.
Blue	'blue'	Bright blue toolbar, white canvas.
Dark Blue	'dark-blue'	Deep blue toolbar, blue accents.
Midnight	'midnight'	Near-black background, purple-pink accents.

---

🔧 Setting the Theme

At initialization

new NeikiEditor('#editor', {
    theme: 'dark'
});

Programmatically

// Set a specific theme
editor.setTheme('light');
editor.setTheme('dark');
editor.setTheme('blue');
editor.setTheme('dark-blue');
editor.setTheme('midnight');

// Cycle to the next theme
editor.toggleTheme();   // light → dark → blue → dark-blue → midnight → light

Via the More menu

The default toolbar includes a Change theme select in the More menu (⋯) that lets users switch themes at runtime.

---

💾 Theme Persistence

Important

The selected theme is saved to localStorage as a global setting. This means:

• It applies to all editor instances on the page
• It persists across page reloads
• If a user previously chose dark mode, theme: 'light' in config is ignored — user preference always wins

This is intentional design. If you need to programmatically override the user's saved preference, call editor.setTheme() after initialization.

---

🖌️ CSS Class Structure

Understanding the DOM structure helps when writing custom styles:

<!-- Editor container -->
<div class="neiki-editor">

    <!-- Toolbar -->
    <div class="neiki-toolbar">...</div>

    <!-- Content area -->
    <div class="neiki-content" contenteditable="true">
        <!-- User content here -->
    </div>

    <!-- Status bar -->
    <div class="neiki-status-bar">...</div>

</div>

When the dark theme is active, neiki-dark is added to the container:

<div class="neiki-editor neiki-dark">

---

🖊️ Custom Content Styles

Use customClass to add your own class to the content area without affecting the default styles:

new NeikiEditor('#editor', {
    customClass: 'article-content'
});

/* Apply custom typography to the content area */
.article-content {
    font-family: 'Georgia', serif;
    font-size: 18px;
    line-height: 1.9;
    color: #1a1a1a;
}

/* Style headings */
.article-content h1 {
    font-size: 2em;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.3em;
}

/* Style blockquotes */
.article-content blockquote {
    border-left: 4px solid #3b82f6;
    background: #eff6ff;
    padding: 1em 1.5em;
    margin: 1.5em 0;
    font-style: italic;
}

---

🌙 Dark Mode Integration

Target the .neiki-dark class to apply custom styles when the dark theme is active:

/* Custom elements in dark mode */
.neiki-dark .my-custom-element {
    background: #1e1e1e;
    color: #e0e0e0;
    border-color: #374151;
}

/* Custom content styles in dark mode */
.neiki-dark .article-content {
    color: #e2e8f0;
}

.neiki-dark .article-content blockquote {
    background: #1e3a5f;
    border-color: #3b82f6;
}

---

🎯 Overriding Editor Styles

You can override built-in styles by targeting Neiki's CSS classes. Use specific selectors to avoid conflicts:

/* Override toolbar background for Light theme */
.neiki-editor .neiki-toolbar {
    background: #f8fafc;
    border-bottom: 2px solid #3b82f6;
}

/* Override content area font */
.neiki-editor .neiki-content {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}

/* Style table cells */
.neiki-editor .neiki-content table td,
.neiki-editor .neiki-content table th {
    padding: 10px 14px;
}

/* Style inline code */
.neiki-editor .neiki-content code {
    background: #f1f5f9;
    color: #dc2626;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.9em;
}

/* Dark mode overrides */
.neiki-editor.neiki-dark .neiki-content code {
    background: #1e293b;
    color: #f87171;
}

---

🧩 Theming the themeToggle Toolbar Button

You can add a standalone theme toggle select to the toolbar:

new NeikiEditor('#editor', {
    toolbar: [
        'bold', 'italic', '|',
        'themeToggle',   // standalone theme select
        '|',
        'moreMenu'
    ]
});

---

🔗 Related Pages

⚙️ Configuration	theme, customClass, and all config options
📋 API Reference	setTheme(), toggleTheme()
🧩 Advanced Features	Complete feature reference

---

_{← Back to Home}