CSS Variables Reference
Complete reference of all customizable CSS variables
Ink provides 50+ CSS variables for deep customization. Below is a complete reference of all available variables organized by category.
Color Variables
Core color palette used throughout the editor.
| Variable | Default | Description |
|---|---|---|
| --ink-primary | #6366f1 | Primary brand color |
| --ink-accent | #8b5cf6 | Accent color for highlights and interactions |
| --ink-bg | #ffffff | Main background color |
| --ink-bg-secondary | #f8fafc | Secondary background for panels |
| --ink-text | #1e293b | Primary text color |
| --ink-text-secondary | #64748b | Secondary text color |
| --ink-border | #e2e8f0 | Border color |
Typography Variables
Font settings for the editor.
| Variable | Default | Description |
|---|---|---|
| --ink-font-family | Inter, system-ui, sans-serif | Main font family |
| --ink-font-mono | JetBrains Mono, monospace | Monospace font for code |
| --ink-font-size | 16px | Base font size |
| --ink-line-height | 1.75 | Base line height |
Editor Variables
Editor-specific styling options.
| Variable | Default | Description |
|---|---|---|
| --ink-editor-padding | 2rem | Editor content padding |
| --ink-editor-max-width | 65ch | Maximum content width |
| --ink-selection-bg | rgba(99, 102, 241, 0.2) | Text selection background |
Code Block Variables
Syntax highlighting colors for code blocks.
| Variable | Default | Description |
|---|---|---|
| --ink-code-bg | #1e293b | Code block background |
| --ink-code-keyword | #c084fc | Keywords (if, for, const, etc.) |
| --ink-code-string | #4ade80 | String literals |
| --ink-code-comment | #64748b | Comments |
| --ink-code-function | #60a5fa | Function names |
| --ink-code-variable | #f472b6 | Variable names |
Usage
To use these variables in your theme, override them in your CSS:
/* Override in your theme CSS */
:root {
--ink-accent: #10b981;
--ink-font-family: 'Fira Sans', sans-serif;
}
/* Or scope to a theme class */
.theme-custom {
--ink-bg: #0f172a;
--ink-text: #e2e8f0;
}