Where is advanced Obsidian CSS classes and extra documentation located?

[fringe]

Just getting into customizing my Obsidian workspace through CSS snippets recently. Extremely fun and engaging. I am new to CSS as well and am slowly gaining an understanding, but I have hit a wall recently.

I have been going through the Obsidian Dev Documentation over CSS Classes and Variables. Primarily trying to correlate the classes in the snippet I have with the information on the documentation; however it doesn’t seem to line up exactly.

For Example, I have the following snippet which hides properties in Reading Mode.

.workspace-leaf-content[data-mode="preview"]
.markdown-preview-view.myclass
.metadata-container{
    display: none;
}

I want to alter this to hide properties in Live Editing mode (I have since found a solution to that). When breaking it down, I wanted more info on the .workspace-leaf-content class and the data-mode property within. However, the best I could do is the CSS Variable and the TypeScript API in the documentation. Neither of which, from what I could tell, had the documentation for the class specifically. I was able to find it through “inspect element” in the HTML code, but that’s hardly helpful. Additionally, I could not find “data-mode” information anywhere except forum posts. I can find some variables that almost match the class, but in use don’t work as expected.

Am I missing some knowledge of how to interpret the documentation to create and use these classes?
Are the classes specific to Obsidian or some common repo? I couldn’t find them on the Mozilla CSS Docs.

Would appreciate more guidance in this. Feel like I gave it my due diligence before coming here. Thank you!

[ariehen]

I don’t think I’ve seen any official Obsidian documentation for data-mode specifically. It’s not in app.css (Obsidian’s default CSS), but it does show up in the DOM/HTML in the DevTools, so you can target it with CSS.

Try searching the web for “CSS attribute selector” or similar.

---

Seems you’ve sorted it out already, but there are two variables for showing/hiding the metadata editor in the different views that can be used with a cssclass:

--metadata-display-reading 
--metadata-display-editing 

so, for example:

.NoProps {
    --metadata-display-reading: none; /* default: block */ 
    --metadata-display-editing: none; 
}

---

Also grabbing a copy of the app.css for reference is useful:

Does anyone know where I can find all the changeable attributes for CSS variables on Obsidian?

A few links: For the latest variables (sometimes the above docs are a bit behind), their default values, and the rest of the css, I recommend grabbing a copy of the app.css and saving it somewhere for reference. You won’t edit this as it won’t do anything; it’s just a quick reference for if you don’t want to use that section of the dev tools. Open the DevTools “Sources” tab → [Screenshot 2026-10-15 at 4.40.31] Click on app.css → [Screenshot 2026-10-15 at 4.40.50] Select all of thi…

You can also right-click on the app.css tab and “save as…” if you don’t want to copy-paste it.

[ariehen]

For .workspace-leaf-content, I think that is specific to Obsidian, but I’m not really playing around in the dev tools for other apps, so can’t say for sure.

I think of .workspace-leaf and the inner .workspace-leaf-content as the panes in Obsidian.

We can target a note, the file-explorer, the Search tab, etc.