2.0 CSS & Rendering Hooks

The Standard Garden Obsidian plugin continuously reflects the active editor mode, document metadata, and design layer state as HTML data attributes and CSS classes onto html body and the leaf container.

This allows custom CSS snippets and bespoke themes to target specific views, publication states, or note layouts with precision.

1. Active View State Hooks

These classes are updated in real time whenever the user focuses, switches, or opens files:

Class / Selector	Active When
`body.stnd`	Standard Garden plugin is loaded and initialized.
`body.stnd-note`	A standard Markdown note is open and focused.
`body.stnd-reading`	The active note is currently in Reading View (rendered HTML preview).
`body.stnd-editing`	The active note is in Editing View (Live Preview or Source mode).
`body.stnd-source`	The active note is specifically in raw Source Mode (without Live Preview).
`body.stnd-canvas`	An Obsidian `.canvas` board is currently open and focused.
`body.stnd-base`	A database or Base file is active.
`body.stnd-webviewer`	The integrated web viewer panel is active.
`body.stnd-empty`	No file or tab is open in the workspace.

2. Document & Publication Hooks

These hooks reflect the frontmatter of the currently active document:

Selector	Meaning & Origin
`body[data-theme="{name}"]`	Reflected from frontmatter `theme: {name}`. Enables scoping styles to a specific theme.
`body.cssclass-{name}`	Injected for each item listed in the `cssclasses:` array in frontmatter.
`body.stnd-note-published`	The active note is successfully published to standard.garden (`publish: true` + `garden-url:`).
`body.stnd-note-public`	The note has `visibility: public`.
`body.stnd-note-unlisted`	The note has `visibility: unlisted`.
`body.stnd-note-private`	The note has `visibility: private`.

3. Design Layer Hooks

When Standard Garden’s modular design system layers are active:

Class	Active Layer
`body.stnd-adapter`	Root class activating the Standard Garden Obsidian workspace adapter.
`body.stnd-typography`	Typography metrics, optical ratios, and baseline rules are active.
`body.stnd-color`	The organic color palette and dark/light mode token injections are active.
`body.stnd-vertical-rhythm`	Proportional vertical rhythm and margins are active.
`body.stnd-callouts`	Minimal callout styling with custom icons is enabled.
`body.stnd-better-highlights`	Textured, gentle highlighters are enabled.
`body.stnd-subdued-links`	Quiet wikilinks without aggressive underlines are enabled.
`body.stnd-clean-frontmatter`	Streamlined frontmatter display in reading mode.
`body.stnd-clean-transclusions`	Seamless block embeds without borders or clutter.

4. CSS Injection Order & Precedence

The plugin injects stylesheets in a strict cascade hierarchy:

#stnd-global       ← Vault-wide CSS (notes flagged with stnd: true)
#stnd-note         ← Per-session CSS (theme notes loaded via cssclasses:)
#stnd-frontmatter  ← Live CSS variables from active frontmatter token keys

Because #stnd-frontmatter is injected last with !important flags, per-note frontmatter tokens always win over global defaults and theme templates.

5. Practical Snippet Examples

Here are common ways to craft custom Obsidian snippets that take advantage of Standard hooks:

Widening Measure in Reading View

/* Increase reading measure only when in reading mode */
body.stnd-reading .markdown-preview-view {
  --prose-width: 44rlh;
}

Special Styling for Public Notes

/* Add a discreet visual cue for notes that are published to the web */
body.stnd-note-published .workspace-leaf-content {
  border-bottom: 2px solid var(--color-green, #10b981);
}

Scoping Styles to a Specific Theme

/* Custom tweak when reading a note formatted with the forest theme */
body[data-theme="forest"] blockquote {
  border-left-color: #059669;
  background: rgba(16, 185, 129, 0.05);
}

Full-Bleed Image Gallery Class

/* When a note specifies cssclasses: [img-max] */
body.cssclass-img-max .markdown-rendered img {
  max-width: 100vw;
  border-radius: 0;
}

CSS & Rendering Hooks