Theming reference

Customize Glyphary with approved CSS snippets and stable theme variables.

This page is the public styling contract for snippets and theme work.

Loading Snippets

Create a .css file in <vault root>/_snippets_/my-theme.css.
Open Settings, go to Appearance, and enable the snippet.
Snippets are injected after Glyphary's built-in styles.

:root {
  --glyphary-accent: #6f7cff;
  --glyphary-heading: #f0f4ff;
  --glyphary-editor-max-width: 760px;
}

Stable Glyphary Variables

These variables are the safest customization points and are used by the Theme Builder.

Canvas

--glyphary-app-bg	Main app background.
--glyphary-surface	Primary panels and editor-adjacent surfaces.
--glyphary-surface-muted	Muted panels, previews, and secondary surfaces.
--glyphary-hover	Hover backgrounds.
--glyphary-selection	Selection and selected-node highlights.

Text

--glyphary-text
--glyphary-text-soft
--glyphary-editor-text
--glyphary-heading
--glyphary-muted
--glyphary-muted-strong
--glyphary-mono-text

Accent, Blocks, Callouts, Syntax, Typography, Spacing And Shape

--glyphary-accent
--glyphary-border
--glyphary-table-border
--glyphary-code-bg
--glyphary-code-text
--glyphary-callout-background
--glyphary-callout-note-color
--glyphary-callout-info-color
--glyphary-callout-tip-color
--glyphary-callout-warning-color
--syntax-blue
--syntax-green
--syntax-yellow
--syntax-red
--syntax-purple
--syntax-orange
--syntax-muted
--glyphary-font-editor
--glyphary-editor-font-size
--glyphary-editor-max-width
--glyphary-code-tab-size

Obsidian Compatibility Variables

Glyphary maps its tokens onto a first-pass Obsidian-style variable surface.

--background-primary
--background-secondary
--background-modifier-border
--blockquote-border-color
--code-background
--interactive-accent
--table-border-color
--text-accent
--text-muted
--text-normal
--text-selection
--text-title-h1
--text-title-h2

Supported Editor Selectors

Use these selectors when variables are not enough. Scope snippets under .editor-surface.

.editor-surface .ProseMirror
.editor-surface h1
.editor-surface .wikilink
.editor-surface .wikilink-ambiguous
.editor-surface .wikilink-missing
.editor-surface ul[data-type="taskList"]
.editor-surface .tableWrapper
.editor-surface .code-block-node
.editor-surface .markdown-columns
.editor-surface .markdown-callout
.editor-surface .markdown-collapse
.editor-surface .rich-link-card
.editor-surface .excalidraw-embed
.toc-list
.toc-entry

Examples

Narrow Editorial Editor

:root {
  --glyphary-editor-max-width: 740px;
  --glyphary-editor-padding-y: 48px;
  --glyphary-editor-line-height: 1.82;
}

Minimal Columns

:root {
  --glyphary-column-gap: 24px;
}

.editor-surface .markdown-column {
  border-color: transparent;
  padding: 0;
}

Stability Rules

Prefer --glyphary-* variables for durable theme work.
Prefer listed .editor-surface ... selectors for snippets that need structural styling.
Avoid styling internal app chrome unless a selector is documented here.