Obsidian Theme Visual Reference (Colors, Headings, Checkboxes, Badges)

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text styles

Bold text

Italic text

Bold and italic text

Strikethrough text

Highlighted text

inline code

Internal link: Obsidian Theme Visual Reference (Colors, Headings, Checkboxes, Badges)

External link: Google

Text-style colors

StyleColorExact value
BoldCyan#22D3EE
ItalicGreen#4CAF50
Bold + italicGold#FFD700
StrikethroughRed#FF5555 (line + text)
HighlightMid-tone amber backgroundrgba(233, 196, 106, 0.45)
Inline codenormal text on code background--code-normal = --text-normal
Internal linkTeal#20828E
External linkLight purple#C77DFF

Colored tags

The colored-tags plugin tints every #tag. Palette = Custom jewel tones, seed 7, solid colors (no gradients), high text contrast for readability. Each tag is hashed to one palette color.

ColorHex
Teal#2a8a94
Blue#4a90d9
Green#5aa07a
Violet#8f78b0
Rose#c25b7a
Orange#e08748
Gold#d9a441
Slate blue-grey#6c8299
Plum#9b5a8f
Brick red#c0504d

Checkboxes

  • Standard checkbox
  • Done / Checked
  • [/] Half-Filled Checkbox
  • [-] Cancelled
  • [>] Forwarded
  • [<] Back Arrow
  • [?] Question Mark
  • [!] Exclamation Mark
  • [*] Star
  • ["] Quote
  • [l] Location Pin
  • [b] Bookmark
  • [i] Info
  • [S] Speech Bubble
  • [I] Lightbulb
  • [p] Thumbs Up
  • [c] Thumbs Down
  • [f] Fire
  • [k] Key
  • [w] Trophy
  • [u] Up Arrow
  • [d] Down Arrow
  • [1] Empty Heart
  • [2] Half Heart
  • [3] Full Heart
  • [4] Plus Sign
  • [5] Minus Sign
  • [6] X
  • [n] Pin
  • [t] Target
  • [a] Book
  • [$] Dollar Sign

Badges

NameIDPreviewColor
Notenote[!!note]Blue
Infoinfo[!!info]Blue
Todotodo[!!todo]Blue
Abstractabstract[!!abstract]Cyan
Summarysummary[!!summary]Cyan
TLDRtldr[!!tldr]Cyan
Tiptip[!!tip]Cyan
Importantimportant[!!important]Red
Successsuccess[!!success]Green
Completeddone[!!done]Green
Questionquestion[!!question]Yellow
Warningwarning[!!warning]Orange
Failurefailure[!!failure]Red
Dangerdanger[!!danger]Red
Bugbug[!!bug]Red
Exampleexample[!!example]Purple
Quotequote[!!quote]Grey rgb(180,180,180)
Completecomplete[!!complete]Per-icon
Milestonemilestone[!!milestone]Per-icon
Processprocess[!!process]Per-icon
Imageimage[!!image]Per-icon
Definitiondefinition[!!definition]Per-icon
Mentionmention[!!mention]Per-icon
Flagflag[!!flag]Per-icon
Snippetsnippet[!!snippet]Per-icon
Highlighthighlight[!!highlight]Per-icon
Profileprofile[!!profile]Per-icon
Attachmentattachment[!!attachment]Per-icon
Lightbulblightbulb[!!lightbulb]Per-icon
Prohibitprohibit[!!prohibit]Per-icon
Stopstop[!!stop]Per-icon
Homehome[!!home]Per-icon
Knowledgeknowledge[!!knowledge]Per-icon
Vaultvault[!!vault]Per-icon

Callouts

Code blocks

JAVASCRIPT
// JavaScript
function greet(name) {
  return `Hello, ${name}`;
}
Click to expand and view more
PYTHON
# Python
def greet(name):
    return f"Hello, {name}"
Click to expand and view more
CSS
/* CSS */
.title { color: #42a5f5; }
Click to expand and view more
BASH
# Bash
echo "Hello World"
Click to expand and view more

Blockquote

A plain blockquote (single >), for quoted text. It can span multiple lines.

Lists

  • Item one
  • Item two
    • Nested item
      • Deeper nested item
  1. First
  2. Second
    1. Nested first
    2. Nested second

Footnotes

Here is a sentence with a footnote.1

Math (LaTeX)

Inline: $E = mc^2$

$$ \int_0^\infty e^{-x},dx = 1 $$

Colored tags

#example-teal #example-blue #example-green #example-violet #example-rose #example-orange #example-gold #example-slate #example-plum #example-brick

Tables

Column AColumn BColumn C
Row 1datadata
Row 2datadata

Dividers


Reference (explanations)

This is the one master reference for every custom visual element in this vault — theme Baseline plus the enabled CSS snippets and plugins. The showcase above renders everything live; the tables below give the correct names and the exact hex where the CSS hardcodes one.

Sizes

ElementSizeFontSet by
Inline title1.618emInstrument SerifObsidian default + equal-heading-sizes.css
All headings H1–H61.5em (uniform)inherits body fontequal-heading-sizes.css--heading-size
Body text1em (16px)body fontBaseline

Headings are uniform and smaller than the title; retune all six via the single --heading-size value.

Heading colors

LevelMarkdownColor nameExact hex
H1#Blue#42a5f5
H2##Sage green#528d76
H3###Muted violet#8470A6
H4####Crimson / magenta-pink#C2185B
H5#####Carrot orange#E67E22
H6######Bright yellow#FFD60A

The inline title is a separate element: color --text-normal (theme off-white), size 1.618em, Instrument Serif — not a heading color.

Checkbox names & colors

Full set from the custom-checkboxes plugin (insert via the editor right-click menu): < Back Arrow · S Speech Bubble · I Lightbulb · n Pin · t Target · a Book · 1 Empty Heart · 2 Half Heart · 3 Full Heart · 4 Plus Sign · 5 Minus Sign · 6 X · $ Dollar Sign · plus Baseline’s native x / - > ? ! * " l b i p c f k w u d glyphs.

13 are custom-colored by custom-colored-checkboxes.css: < (purple), S (green), I (yellow), n (pink), t (purple), a (blue), 1/2/3 (accent teal), 4 (green), 5 (red), 6 (red), $ (green). The rest use Baseline’s default task-glyph styling.

Colored tags

The colored-tags plugin tints every #tag. Palette = Custom jewel tones, seed 7, solid colors (no gradients), high text contrast for readability. Each tag is hashed to one palette color.

ColorHex
Teal#2a8a94
Blue#4a90d9
Green#5aa07a
Violet#8f78b0
Rose#c25b7a
Orange#e08748
Gold#d9a441
Slate blue-grey#6c8299
Plum#9b5a8f
Brick red#c0504d

Palette string (Colored Tags → Custom palette): 2a8a94-4a90d9-5aa07a-8f78b0-c25b7a-e08748-d9a441-6c8299-9b5a8f-c0504d. Adjust the seed to change how tags map to colors.

Callouts

Native Obsidian block callouts (> [!type]), enhanced by the Admonition plugin. Types: note, info, todo, tip, success, question, warning, failure, danger, bug, example, quote (and their aliases). Add - for collapsed / + for expanded (foldable). Colors and icons are per type, theme/plugin-defined.

Table themes

Four named styles from table-themes.css. Apply via right-click on a table → Add CSS classtable-report, table-dark-pro, table-gradient, or table-minimal. Default (no class) is tt-default.

Calendar day colors

From iridium-to-baseline-port.css: SUN #c78080 · MON #a992d0 · TUE #7aa3c9 · WED #7fb59a · THU #c9c48e · FRI #d19e7d · SAT #c093a6.

Source files

WhatFile
Heading colors + accent + text-style/link/strike/highlight + calendar colors.obsidian/snippets/iridium-to-baseline-port.css
Heading & inline-title sizes + H6 case fix.obsidian/snippets/equal-heading-sizes.css
Custom checkbox icons/colors.obsidian/snippets/custom-colored-checkboxes.css
Checkbox menu (names/symbols).obsidian/plugins/custom-checkboxes/main.js
Badge names/colors.obsidian/plugins/badges/styles.css
Colored tags palette.obsidian/plugins/colored-tags/data.json
Callouts.obsidian/plugins/obsidian-admonition/
Table themes.obsidian/snippets/table-themes.css

#tools/obsidian #design #reference #tools/claude #homelab #finance #gaming #health


  1. This is the footnote definition — Obsidian renders it at the bottom of the note. ↩︎