CSS: Improve default styling & docs + provide view HTML source

Feature requests
1

I’m new to Obsidian. I won’t mention it in all sentences but these are all my opinions, so take everything as “according to me…”.

Improve Default Styling

There are apparently 3 view modes: reading, source, and “mixed”.

The source mode should look like a code editor; i.e. using same height monospace characters, like when viewing a Markdown file in VS Code for example.

The mixed mode should have the same styling as the reading mode.
Currently, it seems that at least the vertical spacings between elements are not applied in mixed mode (ex: headings, paragraphs).

Improve Documentation

I tried to find in your documentation how to use CSS Snippets but things are currently not clear. I found About styling and CSS variables. I checked Build a theme and looked at the sample theme. But none of these help me understand which CSS selectors to use. I’m very familiar with CSS but I need to know the actual HTML structure… hence “View HTML Source” below.

I tried to create a simple headings.css:

h2 { color: red; }

Didn’t work so I tried:

h1, h2, h3, h4, h5, h6 { color: red !important; }

Is it because of the colors in dark mode? :thinking:

h1, h2, h3, h4, h5, h6 {
  color: red !important;
  margin-bottom: 3em !important;
}

Not working either… WTF?!? Then I don’t know why but I switched to reading mode and… how that’s why! :roll_eyes::disappointed: And oh, there actually is spacing between elements… but only in reading mode, that doesn’t feel right :face_with_diagonal_mouth:

OK but now, how can I style the mixed mode? The doc doesn’t seem to talk about that :man_shrugging:

View HTML Source

It would be useful to be able to view the actual HTML source code of a Markdown file. That would allow us to see which CSS selector we must use to style the elements we want to customize.

2

Editing view (Source & Live Preview modes) and Reading view have different CSS selectors.

In many cases, the CSS variables cover both viewing modes. e.g.

body {
    --h1-color: var(--color-red);
    --h2-color: var(--color-orange);
    --h3-color: var(--color-yellow);
    --h4-color: var(--color-green);
    --h5-color: var(--color-blue);
    --h6-color: var(--color-purple);
}
1 Like