The Celestial Theme

The Celestial Vault ships with two themes — Celestial (the active default) and Baseline (a fallback). Together they're what makes the vault feel the way it does.

---

Celestial — The Default

Celestial is a deep-space-inspired dark theme designed specifically for the Celestial Vault product. It's not just colors — it's:

• A moody, deep palette of indigos, near-blacks, and gold accents
• Gradient h1 titles in temporal notes (daily / monthly / yearly notes get a soft color gradient on their main heading)
• Animated dividers — <hr> elements have subtle, slow-pulsing keyframe animations
• Day / month / year color theming — Mondays look different from Saturdays, Aprils look different from Octobers, each year gets a quiet annual accent
• Themed typography — system fonts with a slight tighten on body text, a serif on temporal note titles
• Custom callout colors that match the overall palette
• Subtle italic styling on inline tags and metadata

It's designed to fade into the page — atmosphere without distraction.

---

Baseline — The Fallback

The Celestial Vault also ships with a second theme called Baseline. It's a stripped-down, no-frills theme with no atmospheric tweaks.

When To Switch To Baseline

• You want to test whether a styling issue is theme-related or vault-related
• You want to use a different community theme (Anuppuccin, Things, Minimal) but the Celestial CSS snippets keep theming over it — Baseline gives you a clean slate
• You prefer a simpler aesthetic but want to keep all the Celestial UX features (welcome, widget, shortcut bar, etc., are theme-independent)

How To Switch

1. Settings → Appearance → Themes
2. Click Manage
3. Click Baseline to set it as active

Switch back to Celestial via the same path.

---

Day-Of-Week Theming

Daily notes pick up a different color tint based on which day of the week they are:

The day-of-week colors flow into:

• The note's h1 gradient
• The animated divider colors
• The callout accent
• The creation/navigation veil colors

Subtle but visible. Once you've used it for a week, you'll start recognizing what day a note belongs to before you read its title.

---

Month-Of-Year Theming

Monthly notes pick up a tint per month (a 12-month gradient through the year). January is cool blue. April is fresh green. October is auburn. December is winter blue.

These flow into:

• Monthly note h1 gradient
• The animated divider colors
• The creation/navigation veil colors when navigating to that month

---

Year Theming

Yearly notes get a subtle annual accent (lightly themed, less aggressive than month/day theming since you're spending more time inside a single year than inside a single day).

---

Typography Details

The Celestial theme makes a few opinionated typography choices:

• Body text: system sans-serif, slight letter-spacing tighten, line-height generous
• Temporal note titles: serif, gradient color, larger size
• Metadata / properties: italic, smaller, lower contrast
• Callouts: light backgrounds with strong accent borders

You can override any of these with your own snippets.

---

How To Inspect The Theme's CSS

If you want to look at how the theme is constructed:

1. Open Obsidian's developer console: Cmd + Option + I (Mac) or Ctrl + Shift + I (Windows / Linux)
2. Click the Sources tab
3. Find themes/Celestial/theme.css

It's regular CSS. Heavy on CSS variables (which is what makes the snippets able to tweak so much without rewriting whole rules).

---

What Themes Don't Touch

A few parts of the Celestial Vault are styled by CSS snippets, not the theme itself:

• The journal widget — styled by celestial-misc-styles.css
• The shortcut bar at the bottom — styled by celestial-plugin's own CSS
• The four veils — animated via CSS keyframes in celestial-shared-animations.css
• The day/month/year color theming — provided by the per-period theme snippets

This means switching to Baseline keeps most of the Celestial UX intact. The atmosphere on temporal notes (gradient titles, theming) thins out, but the widget, shortcut bar, and veils still work.

---

Up Next

• Celestial CSS Snippets — the snippets that complement the theme
• The Custom Graph Background — the moody backdrop for your graph view
• Understanding the CSS-Snippets — the standalone Time Garden equivalent