Celestial CSS Snippets

The Celestial Vault uses 10 CSS snippets alongside the Celestial theme to deliver the full atmospheric experience. They're all enabled by default, all celestial-*-prefixed, and all toggleable from Obsidian's Appearance settings.

This is the page that explains what each one does — so you can decide which to keep on, which to disable, and which to copy and customize.

How To See / Toggle Them

1. Settings → Appearance
2. Scroll to CSS snippets
3. You'll see all 10 toggles

Toggling is instant. No reload needed.

The 10 Snippets

1. celestial-shared-animations.css

What it does: Defines shared @keyframes animations — celestial-divider-pulse, celestial-divider-shimmer, celestial-star-twinkle. The other temporal-theme snippets reference these.

Keep on: yes. Disabling breaks the animated dividers in every other theme snippet.

2. celestial-daily-themes.css

What it does: Day-of-week color theming. Each weekday gets its own color triplet — applied to the daily note's h1 gradient, dividers, and accent colors.

Keep on: yes (unless you want all daily notes to look identical regardless of day).

3. celestial-monthly-themes.css

What it does: 12-month color theming on monthly notes. Same approach as daily.

Keep on: yes.

4. celestial-quarterly-themes.css

What it does: Theme styling for Dreamlines (quarterly notes).

Keep on: yes.

5. celestial-yearly-themes.css

What it does: Subtle annual theming on yearly notes. Less aggressive than daily/monthly since the timespan is longer.

Keep on: yes.

6. celestial-misc-styles.css

What it does: Styles shared template-component classes — .phone-responsive, .custom-editor, .centered-button, the rating progress bar, button hover states.

Keep on: yes — disabling makes various interactive components look broken.

7. celestial-tweaks.css

What it does: Vault-wide visual baseline. Subtle italic tags, soft callouts, image-borders / image-small classes for galleries, layout polish.

Keep on: yes.

8. celestial-vault-tweaks.css

What it does: Sidebar padding, calendar plugin polish, and (importantly) hides the Journals plugin's plumbing properties on .dreamline notes (so Dreamlines don't show a wall of frontmatter when you open them).

Keep on: yes (unless you specifically want to see the Dreamline frontmatter).

9. celestial-graph-background.css

What it does: Adds a custom background image to the graph view. Style Settings exposes position, size, opacity, brightness, blur — so you can tune it.

Keep on: yes (it's part of why the graph view looks the way it does). Disabling reverts to Obsidian's default plain-color graph background.

10a. celestial-hide-visible-frontmatter.css (default-enabled)

What it does: Hides the rendered metadata table + inline title on temporal notes when Obsidian's "Properties in document" is set to visible.

Keep on: yes if Obsidian's "Properties in document" = visible (the table view).

10b. celestial-hide-source-frontmatter.css (default-disabled)

What it does: Same idea as 10a, but for source mode. Hides raw YAML CodeMirror lines on temporal notes when Obsidian's "Properties in document" is set to source.

Keep on: yes — but only when "Properties in document" = source.

How They Connect To The Theme

The snippets reference the same CSS variables that the Celestial theme exposes. So if you switch to a different theme:

• The temporal theme snippets (daily, monthly, quarterly, yearly themes) will still apply their day/month color logic — but the colors won't match the new theme's palette
• The utility snippets (misc-styles, tweaks, vault-tweaks) generally still work — they target specific Obsidian classes, not theme-specific ones
• The frontmatter-hiding snippets still work
• The graph background snippet still works (it's a backdrop, doesn't depend on theme color)

So you can run the Celestial snippets on top of any other theme. The aesthetic won't be identical, but the structural styling holds.

Customizing A Snippet

What You'd Customize

A few real edits people commonly make:

"I want the daily note titles to be even more colorful"

Open celestial-daily-themes.css, find the h1 gradient rules, and intensify the color values. (Use HSL — bumping saturation goes a long way.)

"I don't like the gradient — I want plain titles"

In your custom snippet, override:

.timegarden-daily h1 {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--h1-color) !important;
}

"I want the picture galleries to be wider"

In your custom snippet, override the .image-small and .image-borders rules with your preferred dimensions.

"I want a lighter graph background"

Use Style Settings plugin (it's pre-installed in the Celestial Vault) → look for the "Graph Background" entries → tune opacity and brightness with the sliders.

What's Not In The Snippets

The plugin-driven UI elements (the welcome overlay, the journal widget, the four veils, the shortcut bar) are styled by the celestial-plugin's own CSS file, embedded directly into Obsidian's stylesheet at plugin-load time. They're not in .obsidian/snippets/.

You can't easily disable just one of those plugin-styled elements via the snippets system — but you can disable them via the polish toggles in settings.

A Geeky Detail

Class names set by the shipped templates (.timegarden-hide-frontmatter-*, .phone-responsive, .image-borders, .image-small, .custom-editor, .centered-button) are stable — renaming them would break templates.

Keyframe animation names (celestial-divider-pulse, celestial-divider-shimmer, celestial-star-twinkle) are internal to the snippets — safe to rename if you fork the snippets and want your own naming.

Up Next

• The Celestial Theme — the parent theme these snippets sit on top of
• The Custom Graph Background — the dedicated snippet for graph view
• Understanding the CSS-Snippets — the standalone Time Garden CSS-snippet equivalent