Rainbow Header Coloring
albertoos125 downloadsColor markdown headers (H1-H6) with customizable palettes. Supports colormap cycling and per-level user-defined colors.
- Overview
- Scorecard
- Updates5
Color your markdown headers (H1–H6) in Obsidian with customizable colors — in both the editor and reading view.
Features
- Colormap mode — automatically assigns a distinct color to each heading level (H1–H6) from a built-in palette (HSV rainbow, cool, warm, greyscale)
- User-defined mode — set an explicit font color and background color for each heading level independently, with optional bold and italic
- Both views — colors apply in Live Preview, Source mode, and Reading view
- Lightweight — no external runtime dependencies; color generation is built in (~50 lines of math)
Installation
Community plugin directory
- Open Obsidian and go to Settings → Community plugins.
- Select Browse and search for Rainbow Header Coloring.
- Select Install, then Enable.
Manual install (development / testing)
- Build the plugin:
npm install npm run build - Copy
main.js,manifest.json, andstyles.cssto your vault:<Vault>/.obsidian/plugins/rainbow-header-coloring/ - Reload Obsidian and enable the plugin in Settings → Community plugins.
Settings
Colormap mode
| Setting | Default | Description |
|---|---|---|
| Mode | colormap |
colormap cycles colors automatically; userDefined gives per-level control |
| Colormap | hsv |
Color palette (hsv, cool, warm, greyscale) |
| Shades | 20 |
Number of color steps in the palette (10–40) |
| Font opacity | 1.0 |
Opacity of the generated header text color (0.0–1.0) |
| Background opacity | 0.1 |
Opacity of the generated header background color (0.0–1.0) |
| Enable in editor | true |
Apply coloring in Live Preview and Source mode |
| Enable in reading view | true |
Apply coloring in Reading view |
User-defined mode
Per heading level (H1–H6):
| Setting | Default | Description |
|---|---|---|
| Font color | One Dark Pro palette | CSS color for the heading text |
| Background color | One Dark Pro palette | CSS color for the heading background |
| Enable background | true |
Toggle background color on/off per level |
| Bold | false |
Make the heading bold |
| Italic | false |
Make the heading italic |
Development
# Install dependencies
npm install
# Dev build with watch
npm run dev
# Production build
npm run build
# Lint
npm run lint
# Build and install into the test vault
npm run install-test
Test vault
A test-plugin-vault/ directory is included in the repo with 9 markdown files covering all edge cases (code blocks, YAML frontmatter, blockquotes, callouts, inline formatting, etc.). After running npm run install-test, open that folder as an Obsidian vault to do manual QA.
See CHANGELOG for release history.
Credits
- Scaffolded from the obsidian-sample-plugin template by Obsidian
- Inspired by vscode-markdown-header-coloring by satokaz
License
HealthExcellent
ReviewPassed
About
Color markdown headers (H1–H6) in editor and reading view with customizable font and background colors. Choose automatic colormap palettes (HSV, cool, warm, greyscale) or set per-level font/background colors with optional bold/italic; colors apply in Live Preview, Source, and Reading views. Use a lightweight built-in color generator with no external dependencies.Details
Current version
1.2.3
Last updated
Last week
Created
3 months ago
Updates
5 releases
Downloads
125
Compatible with
Obsidian 1.0.0+
Platforms
Desktop, Mobile
License
MIT