Celestial CSS Snippets

The Celestial Vault uses 9 CSS snippets alongside the Celestial theme to deliver the full atmospheric experience. They're 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 9 toggles

Toggling is instant. No reload needed.

The 9 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: Three things. Sidebar padding and calendar plugin polish; hiding the Journals plugin's plumbing properties on .dreamline notes (so Dreamlines don't show a wall of frontmatter when you open them); and the vault dock: the bottom-left vault profile area is restyled into a mirror of the dynamic shortcut bar, same height and surface, always visible, anchored against the sidebar divider so the two bars read as one continuous strip across the bottom of the window. The dock adapts to whatever theme is active, sitting flush at the bottom on other themes and riding the Celestial theme's floating-pane gap when Celestial is on.

Keep on: yes (unless you specifically want the stock vault profile and visible Dreamline frontmatter).

9a. 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).

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

What it does: Same idea as 9a, 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

So you can run the Celestial snippets on top of any other theme. The aesthetic won't be identical, but the structural styling holds. The plugin-driven pieces (shortcut bar, vault dock, note banners) are theme-adaptive too, so switching themes won't break the bottom bars or squash your banners.

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 different colors / fonts / heading styles"

Don't write CSS for this: it's all in the Celestial theme's Style Settings catalog (Settings → Style Settings → Celestial). See The Celestial Theme.

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, and home of the Style Settings customization catalog
• Understanding the CSS-Snippets — the standalone Time Garden CSS-snippet equivalent