Custom Callout Palette for Obsidian

Obsidian CSS snippet that adds semantic callout types for notes, dashboards, study reviews, project planning, and troubleshooting.

Description

Credit: Made by Pilly-boi

What it does

• Adds custom callout types like [!urgent], [!definition], [!decision], [!evaluation-good], and [!stuck].
• Uses separate light and dark color palettes.
• Uses Obsidian's built-in callout variables: --callout-color and --callout-icon.
• Overrides grey card backgrounds from other callout snippets by tinting matching callouts directly.
• Keeps the snippet portable: no plugin dependency and no theme dependency.

Install

1. Install palette file: custom-callout-palette.css
2. Copy that file into your vault's .obsidian/snippets/ folder.
3. In Obsidian, go to Settings → Appearance → CSS snippets.
4. Enable the snippet.

Included callout types

Group	Callout types
Red	evaluation-bad, bug, danger, error, fail, failure, missing, urgent
Orange	alert, important, todo, to-do
Gold	assessment-neutral, attention, caution, inspect, hint, stuck
Green	completed-tasks, evaluation-good, goal, success, tip
Blue	abstract, faq, info, link, note
Teal	calculation, definition, equation, quote, reference, review, rule
Purple	advanced, decision, idea, inspiration, reflection, thought

Example

[!urgent] Deadline risk Handle this before anything else.

[!definition] Definition A callout type for key terms.

[!decision] Decision Record what was chosen and why.

Screenshots

Installation

1. Download snippet.css from this repo
2. Place it in your vault's CSS snippets folder
3. Enable it in Settings > Appearance > CSS Snippets

---

Published via Vault Hub