Heading Hierarchy for Minimal Theme

A CSS snippet for Obsidian that gives each heading level (H1-H6) a distinct but closely related hue, instead of the single flat color the Minimal theme uses by default. The result is a visual hierarchy that's easier to scan at a glance, using a subtle, desaturated palette inspired by Everforest.

Works in both light and dark mode, with separate scales optimized for each.

Why

Minimal is an excellent theme in terms of layout and philosophy, but by default all headings share the same text color — the only difference between H1 and H6 is size. If you nest headings a lot (long notes, documentation, etc.), it's hard to tell at a glance which hierarchy level you're looking at.

This snippet solves that by assigning a distinct color to each level, while keeping all tones within the same family (low saturation, similar lightness) so it doesn't feel like a rainbow — just a subtle visual guide.

Requirements

• Obsidian with the Minimal theme installed and active.
• (Optional but recommended) the Minimal Theme Settings plugin, if you also want to tweak other aspects of the theme from the UI.

It doesn't depend on any plugin to work — it's a pure CSS snippet.

Installation

1. Download heading-hierarchy.css from this repo.
2. Copy the file into the .obsidian/snippets/ folder inside your vault.
   • If that folder doesn't exist, create it.
   • Shortcut: in Obsidian go to Settings → Appearance → CSS snippets and click the folder icon to open the location directly.
3. In Settings → Appearance → CSS snippets, enable the heading-hierarchy snippet with the toggle.
4. Switch between light and dark mode to see both scales.

Customization

The colors are defined as CSS variables (--h1-color through --h6-color) separated by mode, so you don't need to touch the part that applies the styles — just the hex values at the top of the file:

body.theme-dark {
  --h1-color: #d1c6ad;
  --h2-color: #c6c69f;
  --h3-color: #a8bd93;
  --h4-color: #8ab799;
  --h5-color: #81b1a5;
  --h6-color: #7ea6a9;
}

How to adapt it to your own palette

The logic used to pick these colors was:

1. Pick an anchor color for H1 — usually your accent color or whichever text color you like best (it could be the same one you use for timestamps, tags, etc.).
2. Convert that color to HSL (hue, saturation, lightness). Any online "hex to hsl" converter works.
3. Gradually rotate the hue for each following level (H2, H3...), moving in one direction around the color wheel (e.g., from beige/yellow toward green and then blue-teal, as in this snippet). A step of ~15-25° per level usually looks good.
4. Keep saturation and lightness similar across levels — variations of more than 10-15 points between H1 and H6 make some headings look "washed out" or "shouty" compared to the others.
5. Tune light and dark mode separately. Simply inverting the color isn't enough: on a dark background, H1 benefits from more lightness/saturation (it stands out more), while on a light background, lower lightness works better to keep contrast.

If you use Python, here's the snippet used to generate this repo's scale (starting from a beige #d1c6ad and rotating toward greens/teals):

import colorsys

def hsl_to_hex(h, s, l):
    r, g, b = colorsys.hls_to_rgb(h/360, l/100, s/100)
    return '#%02x%02x%02x' % (round(r*255), round(g*255), round(b*255))

# (hue, saturation%, lightness%) per level
dark = [(42,28,75), (60,26,70), (90,24,66), (140,24,63), (165,24,60), (185,20,58)]
for i, (h, s, l) in enumerate(dark, 1):
    print(f'H{i}', hsl_to_hex(h, s, l))

Technical notes

• The snippet detects the active mode using the body.theme-light / body.theme-dark classes that Obsidian already applies automatically — no manual toggle needed.
• It applies to both Live Preview (.cm-header-N) and Reading View (.markdown-rendered hN).
• Uses !important because Minimal applies its own heading color with some specificity; without it, the snippet won't override the theme's style.

License

MIT — use it, modify it, share it.