Updated Obsidian UI with Breathing Space and Cleanliness

tav · February 15, 2022, 4:33am

I never liked the way UI elements were crammed in the sidebar and the ribbon, and I wanted only the sidebar to be in Dark Mode.

Custom typography and colors are based on Panda, including the font - Bear Sans UI

Theme: California Coast by @mgmeyers

If anyone would like the CSS, I’ll share it.

PR-C · February 15, 2022, 5:18am

This looks quite nice, would love to see the CSS, especially to learn how you did the left panel menus. Thanks!

tav · February 15, 2022, 6:27am

I divided the CSS into 4 parts:

Typography/Colors - Download CSS
UI Changes - Download CSS
Dark Sidebar - Download CSS
Beautiful Frontmatter - Download CSS

Not all Typography changes are in this CSS as they are done through the Style Setting Plugin

Edit: Added another CSS to make Frontmatter look clean and nice, updated links to the repo that is connected to my CSS files, and will update as I make changes.

tav · February 15, 2022, 4:03pm

Access the Style Setting JSON file here, so now you can get the exact typography and colors as well.

tav · February 17, 2022, 2:35am

If you want the beautiful Bear Sans UI font, the best way would be to download Panda and get it from the App’s content (Panda.app → Contents → Resources)

It’s their custom font, but I guess it’s ok to use it personally.

Angel · February 17, 2022, 9:38am

Very nice design. For anyone who can’t get the Bear font, Atkinson Hyperlegible is freely available and very clean and clear. I particularly like having a slashed zero to distinguish 0 from O.

Angel

Klaas · February 17, 2022, 11:59am

I find Cascadia Mono better legible than Atkinson Hyperlegible. The only thing I prefer in AH is that fractions, such as ¾ are better legible. That is just my view, of course, many people agree with you on AH.

Angel · February 17, 2022, 1:07pm

This?

Thanks for the recommendation.

Angel

Klaas · February 17, 2022, 1:33pm

@Angel yes, that is what I mean. I used to hate monospace, and the 1^st I used to do in an app is replace it with a variable width font. But, that/I changed gradually.

What I like about certain monospace fonts (Space Mono, B612 Mono, MonoLisa are some others) is that the letterspacing is just that bit wider, and the letter shapes are easier to read.

Heck, I even set the font to monospace in my Dark Reader extension, which thus converts web page text to monospace.

Oh well, I am just a monospace nut

tav · May 13, 2022, 4:54pm

Make YAML front-matter look beautiful in Live Preview mode

I’ve added another CSS snippet file for this in the CleanObsidianCSS repo.
I also edited the post above with links to each CSS file.

Inspired by this post by @NomarCub

tav · May 29, 2022, 12:38pm

Update to Typography CSS

Red accent color is more accessible, readable in terms of color contrast.
Links in edit mode are dark, they were almost invisible before.
Ugly outgoing link icon replaced with clean outgoing arrow.

Don’t forget to update the Style Settings to update the accent color at all places.

sauron918 · July 3, 2022, 12:59pm

Thanks for your efforts, love it.

I’m new here, can it be converted to some theme?

tav · July 13, 2022, 5:57am

Thank you.
I’m still learning. I will eventually turn these into a theme.
I think I’ll start that by next month.