Theme Development Guide

Create custom themes for Ink editor

Ink supports a powerful theme system that allows you to completely customize the visual appearance of the editor. This guide will walk you through creating your own theme.

Theme Structure

A theme is a collection of CSS variables that define colors, fonts, spacing, and other visual properties. Themes are organized into several categories:

• Colors - Primary, accent, background, and text colors
• Typography - Font families, sizes, and weights
• Spacing - Margins, paddings, and gaps
• Code Blocks - Syntax highlighting colors

Creating a Theme

1. Create a new CSS file for your theme
2. Define your CSS variables under a class or data attribute
3. Import and apply your theme in the editor settings

Example Theme

Here is a simple example of a custom dark theme:

/* my-dark-theme.css */
.theme-my-dark {
  --ink-bg: #1a1b26;
  --ink-bg-secondary: #24283b;
  --ink-text: #a9b1d6;
  --ink-text-secondary: #565f89;
  --ink-accent: #7aa2f7;
  --ink-border: #3b4261;

  /* Code syntax highlighting */
  --ink-code-keyword: #bb9af7;
  --ink-code-string: #9ece6a;
  --ink-code-comment: #565f89;
  --ink-code-function: #7aa2f7;
}

Tips