Styling The Graph View
How to recolor the graph view with the Celestial theme's Graph colors controls, and how to add a custom image backdrop with your own snippet.
Obsidian's graph view shows your vault as a constellation of nodes and links. The Celestial Vault ships it on the theme's clean, deep-space-dark surface, and as of v1.3 the colors of that constellation are fully yours to tune.
Why It Matters
The graph view in most vaults looks clinical. Default background, hard-edged nodes. Functional but lifeless.
A graph tuned to your taste becomes something contemplative: a place you'd actually open to think, not just to verify links exist. Because you'll spend real time in your graph (especially if you live in the self-organizing layer), making it a beautiful place pays off.
Tuning The Graph Colors
The Celestial Vault ships with the Style Settings plugin pre-installed, and the Celestial theme exposes a Graph colors group:
Settings → Style Settings → Celestial → Colors → Graph colors
(Or take the shortcut: Settings → Celestial Plugin → Polish & atmosphere → Theme appearance deep-links you into the same catalog.)
You'll find color pickers for:
| Control | What it colors |
|---|---|
| Line color | The links between notes |
| Node color | Regular note nodes |
| Active node color | The node of the currently focused note |
| Tag node color | Tag nodes (if you show tags in the graph) |
| Attachment node color | Image and file nodes |
| Unresolved node color | Links to notes that don't exist yet |
All updates are live. Pick a color, watch the graph respond. Every control has a reset arrow back to the shipped default, so experimenting is free.
Changing nothing changes nothing.
The defaults are the calibrated Celestial look. The Graph colors group exists for when you want your category constellation gold, your unresolved ideas ghost-grey, or your whole graph in one monochrome accent.
Adding A Custom Image Backdrop
The vault no longer ships a graph background image; the graph sits directly on the theme surface. If you want an atmospheric image behind your nodes, a small personal snippet does it:
- Create a file like
my-graph-backdrop.cssin.obsidian/snippets/ - Paste:
.workspace-leaf-content[data-type="graph"] .view-content {
z-index: 0;
}
.workspace-leaf-content[data-type="graph"] .view-content::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: url("https://example.com/your-image.png");
background-size: cover;
background-position: center;
opacity: 0.2;
filter: brightness(0.7) blur(1px);
}- Enable it in Settings → Appearance → CSS snippets
Swap in your own image URL, then tune opacity, brightness, and blur until the image fades behind your nodes without overpowering them. Because the snippet is yours (not part of the vault's system files), it survives every vault update.
What Makes A Good Graph Backdrop
A few principles:
- Low contrast or low detail: busy images compete with the graph's nodes and edges
- Atmospheric: landscapes, nebulae, abstract gradients all work; specific objects with sharp lines don't
- Dark or muted color palette: bright images clash with the Celestial dark theme
- Keep the opacity low: around 0.2 is where an image reads as atmosphere instead of wallpaper
Some sources:
- Unsplash: search for "nebula", "starfield", "ambient", "atmospheric"
- Pixabay: same kinds of searches
- NASA's image archive: public domain, lots of stunning space imagery
Going Back To Stock
- Colors: every Graph colors control has a reset arrow; click it and the shipped value returns.
- Backdrop: toggle your snippet off in Settings → Appearance → CSS snippets. The graph reverts instantly.
Up Next
- The Celestial Theme: the full Style Settings catalog the graph colors live in
- Celestial CSS Snippets: how the snippet layer works
- The Self-Organizing Vault: why you'll spend time in the graph view at all