Updated Obsidian UI with Breathing Space and Cleanliness

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.

13 Likes

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

2 Likes

I divided the CSS into 4 parts:

  1. Typography/Colors - Download CSS
  2. UI Changes - Download CSS
  3. Dark Sidebar - Download CSS
  4. 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.

4 Likes

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

3 Likes

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.

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

2 Likes

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.

1 Like

This?

Thanks for the recommendation.

Angel

1 Like

@Angel yes, that is what I mean. I used to hate monospace, and the 1st 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 :rofl:

1 Like

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

2 Likes

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.

Thanks for your efforts, love it.

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

1 Like

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

2 Likes