n3m3sis-obsidian-snippets

Personal Obsidian customization pack — CSS snippets and a custom plugin that together give my vault a cohesive earth/cyan/amber palette, expressive headings, decorated lists, and live in-editor navigation indicators.

Designed against the Brutal Gum theme. Snippets reference theme defaults (line-heights, sizes, accent variables) so heading sizing and spacing inherit cleanly. Most rules should still work under other themes but specific colors and offsets are tuned for Brutal Gum.

---

Layout

snippets/
  body-sand.css          # body text + list styling (skull bullets, numbered tags)
  bold-amber.css         # bold text color
  highlight-cyan.css     # ==highlight== styling
  headings-palette.css   # h1-h6 colors, badge icons, neon-line accents
  pdf-dark-mode.css      # dark mode for Obsidian's built-in PDF viewer
  icons/
    skull-poison.png     # skull-and-crossbones bullet for unordered lists
plugins/
  heading-child-indicators/
    main.js              # the custom plugin
    manifest.json

---

Snippets

Drop the .css files into <vault>/.obsidian/snippets/ and the icons/ folder alongside them. Enable each snippet via Settings → Appearance → CSS Snippets.

body-sand.css

Body text in warm sand (#c9b896 dark / #6b5638 light). List items get a darker brown. Bullet markers (-, *) render as a small skull-and-crossbones PNG icon, both in reading view (via ::marker) and in live preview (via .list-bullet swap). Numbered lists render inside a rounded-rectangle tag — zero-padded to 3 digits (001, 002, …) when the Heading Child Indicators plugin is also enabled.

Code blocks are excluded from body recoloring via :not(.HyperMD-codeblock) so syntax highlighting stays intact.

bold-amber.css

Bold text (**foo**) in warm amber (#e0b06b dark / #a67730 light) instead of the default white/black. Underline preserved from the theme.

highlight-cyan.css

==highlight== text gets a translucent cyan fill that harmonizes with the heading-1 teal. Dark-mode uses an rgba background so callouts and overlays bleed through naturally.

headings-palette.css

Per-level heading colors (palette below), labeled diamond badges with SVG mask cutouts ("H1", "H2", ... letters punched through a colored diamond), and gentle top/bottom neon accent lines on each heading.

Level	Dark hex	Light hex	Vibe
h1	#7dd3c0	#2d8a78	teal-cyan
h2	#c47a5a	#8a4530	terracotta
h3	#a87890	#6a4858	dusty plum
h4	#8a9e5a	#5a7040	olive
h5	#c4965a	#7d5a28	warm ochre
h6	#7a8a98	#48535e	slate

Also includes:

• First-letter drop-cap on h1, h2, h3 only (avoids line-box inflation on h4-h6 which share h3's font-size).
• Heading text-size overrides: h4/h5 promoted to h3's size, h6 promoted to h4's original size, all with matching line-heights.

pdf-dark-mode.css

Forces Obsidian's built-in PDF.js viewer (embedded PDFs + dedicated PDF tabs) into dark mode using invert(1) hue-rotate(180deg) so photographs and diagrams stay hue-accurate.

---

Plugin: heading-child-indicators

Drop the folder into <vault>/.obsidian/plugins/ and enable in Settings → Community Plugins.

Two features, one plugin:

1. Heading breadcrumb indicators

On every heading line in live preview:

• Collapsed heading → small colored solid diamonds along the right edge of the top border line, one per distinct child level present in the folded subtree (h2 collapsed with h3+h4 inside → two diamonds).
• Expanded heading → a frosted-glass pill on the top-right showing the parent heading's text in the parent's color, and one on the bottom-right showing the next direct child heading's text in its color. Click any pill to jump to that heading.

2. Live-preview numbered list zero-padding

In live preview, list markers (1., 2., …) are visually re-rendered as 001, 002, … inside the rounded rectangle defined by body-sand.css. CSS counters can't sequence reliably across CodeMirror's virtual scrolling, so the plugin reads the actual number from each .cm-formatting-list-ol token, formats it padded, and exposes it via a CSS custom property --hci-pad. The CSS uses content: var(--hci-pad) on a ::before pseudo to display the padded version while hiding the original via color: transparent.

Safety architecture

The plugin never mutates .cm-line text content — only inline style attributes and a separate overlay <div> appended to .cm-editor. This is the bright-line rule for CodeMirror 6 plugins: content mutations inside .cm-line are interpreted as document edits and get synced back to the file (which once duplicated a heading several thousand times in 30 seconds during development).

State changes use signature-fingerprint reconciliation — the indicator DOM only rebuilds when the heading tree actually changes, not on every poll tick. Scroll handling uses requestAnimationFrame for frame-accurate pinning. Hover state skips position updates entirely so the pill labels never bounce on mouse-over.

---

License

Personal use. Take whatever you want. No warranty.