Elevator Pitch
Bring UserCSS-style variables to CSS snippets, allowing users to customize snippets directly from the Settings UI (e.g., toggle sections, change colors, adjust sizes) without editing CSS manually.
Problem
CSS snippets in Obsidian are great but static.
Snippet authors must explain some of the the snippets workings in order for users to confidently customise them, but this creates friction for non-technical users.
Proposed Solution
Add support for the UserCSS variable syntax inside CSS snippets.
UserCSS is standard CSS with additional metadata and a custom variable declaration format. I am not proposing full metadata support (author, domain, etc.), as most of that is not relevant to Obsidian.
Instead, I propose:
Support only the UserCSS variable syntax and expose those variables as inputs in the Appearance → CSS Snippets section.
For example, a snippet could define:
- A color picker
- A numeric slider
- A dropdown selector
- A toggle to enable/disable a feature block
Obsidian would parse these variable declarations and render appropriate UI controls in the Snippets panel. Changing a value would dynamically update the snippet.
Why This Matters
- Authors can share one flexible snippet instead of multiple variants.
- UserCSS already defines a de-facto standard syntax for configurable CSS. Adopting it (at least partially) avoids inventing a new custom format.
Further reading: