4.5 CSS & Rendering Hooks
The Standard Obsidian plugin reflects the current view and editor state onto the <body> element (and the active view container) as HTML data attributes and class names. This allows your custom themes and CSS snippets to target specific notes or modes.
Active State Hooks
These classes are added to <body> depending on what kind of view or file is currently open and focused:
| Class / Selector | Description |
|---|---|
stnd-note |
A standard Markdown note is open and active. |
stnd-reading |
The active note is in Reading View (preview). |
stnd-editing |
The active note is in Editing View (Live Preview or Source Mode). |
stnd-source |
The active note is in raw Source Mode (added alongside stnd-editing). |
stnd-canvas |
A Canvas view is active. |
stnd-base |
A Base folder note is active. |
stnd-webviewer |
A web viewer frame is active. |
stnd-empty |
No file is currently open. |
Document Specific Hooks
These hooks are based on the frontmatter metadata of the active Markdown note:
| Class / Selector | Description |
|---|---|
[data-theme="..."] |
Reflected from the theme: frontmatter property. Allows styling a note with a specific theme. |
cssclass-{name} |
Injected for each item listed in the cssclasses: or snippets: array in frontmatter. |
stnd-note-published |
The note has been successfully published to your garden. |
stnd-note-public |
The note is set to visibility: public. |
stnd-note-unlisted |
The note is set to visibility: unlisted. |
stnd-note-private |
The note is set to visibility: private. |
Design Layer Hooks
These classes are active when standard styles are loaded:
| Class / Selector | Description |
|---|---|
stnd-typography |
Active when typography styles are enabled. |
stnd-color |
Active when color tokens are enabled. |
stnd-vertical-rhythm |
Active when vertical rhythm and grid overlays are turned on. |