Minimal Theme

If you grab the latest version of theme you will see that I have added a new variable called --text-editor which you can use to define the font you want in edit mode.

I looked into the issue with contextual alternates. The letter-spacing property seems to conflict with contextual alternates, so you’ll need to remove that line. I’ve added a comment to help you find it (line 156 in the latest version).

Since the theme is designed to use system fonts, I am going to keep that property in the default version of the theme, otherwise SF (the system font on Mac) appears too tight.

3 Likes

Thanks a lot! Removing letter-spacing did the trick.

I’m so used to changing typefaces that I forgot using native fonts is one of the main ideas behind Minimal Theme. Since you’re on Mac, I just wanted to let you know that in Windows the theme is using Arial, but Windows has been using Segoe UI as the default system font since Windows 7. I would suggest adding that to the list of fonts, since Windows will ignore -apple-system,BlinkMacSystemFont, and use the default sans-serif, which is Arial and not Segoe. I’d say -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; will get the desire seamless look you’re already getting in Mac with SF.

Here’s a screenshot of how it looks on Windows using Segoe UI, next to a native Windows app.

Good call, thank you. I will add Segoe to the font stack.

The latest version of Minimal theme is now available:

  • Adds native fonts for Windows
  • Fixes padding issues with backlinks and search results in 0.8.4
  • Taller popover preview pane
3 Likes

:bowing_man:‍♂ Thanks for being so quick!

A new version of Minimal theme is available. This version improves readability of expanded search results, particularly for lists.

Before

After

10 Likes

Minimal Theme has been updated for compatibility with 0.8.5

  • YAML front matter styling
  • Added editable variable for font used in code blocks
  • More consistency in marker position across list types (bulleted, numbered, checklists)
5 Likes

I’ve been really enjoying the last updates and I just wanted to report a small bug I found. When you have an ordered list with +10 items, the two-digit list’s numbers overlap with the list item content:

image

I don’t usually have long lists like that, so I can’t tell if this bug has always been there or it has something to do with the latest changes regarding marker position across list types.

Thank you for designing this theme and keeping it up-to-date. Obsidian now kinda looks like a native macOS app now and I’m loving it :stuck_out_tongue:

Edit: After playing around with the theme for a bit, I have a quick feature request. in the current dark mode, It’s hard to distinguish Mermaid nodes from the background because they have the same color. IMHO it would be more visually pleasing to assign a lighter color to the border of Mermaid nodes.

Screen Shot 2020-08-29 at 6.53.17 PM

Just updated Minimal theme for 0.8.10

@ayrtonsom I’ll check out this issue next!
@xurc haven’t used mermaid much yet, feel free to share your tweaks if you find something you like!

2 Likes

@ayrtonsom the issue with list numbers should be fixed if you grab the latest version of the theme.

1 Like

A big update to Minimal theme is now available on Github or via Community Themes in the app.

“Perfection is reached not when there is nothing left to add, but when there is nothing left to remove.” — Antoine de Saint-Exupéry

Frameless

Minimal Obsidian has been significantly revamped to take advantage of the new frameless window style. Please take a look at the updated Readme file.

This theme is not actively tested on Windows. If you’re on Windows and would like to help improve the theme feel free to share your code. In the meantime, if anything looks wonky, the titlebar CSS can be commented out near the top of the file.

To drag the window, use the topmost edge of the window, or empty spaces in the the right sidebar. To drag panels or tabs located near the top of the window, use the lower half of the icon.

Keyboard-first changes

In pursuit of minimalism, I plan to keep hiding any features that I infrequently use or only use via the keyboard. As always you’ll be able to comment out that part of the CSS, and I’ll try to make that as easy and clearly documented as possible.

This means some functionality will only be accessible via keyboard shortcuts, unless you re-enable it in the CSS, or if Obsidian adds access to the features via the system menu bar — see feature request.

4 Likes

Hi all,

Just wanted to post this for anyone who has been trying to use Andy Matuschak mode - V2.7 (updated for 0.7+ new panes) with this theme.

I recently added Andy Mode and noticed that there were some bugs with the title pane. I’ve only noticed this bug with the Minimal theme, so I’m posting it in this thread instead of the Andy Mode thread.

In case anyone else is having these issues, here is how I tweaked them. I personally use the rotated text Andy mode, so I showed the solutions for both rotated and not.

  1. A shadow covering the beginning of the document title.
  2. The title pane icons covering the title text.

Tweak for #1

The issue lies in a line of code in the Minimal theme CSS dark/light theme specifications. I fixed this problem by commenting this line out:

Dark mode:

# As it is in GitHub
--background-transparent:hsla(var(--base-h),var(--base-s),var(--base-d),0);

# Commented out
/* --background-transparent:hsla(var(--base-h),var(--base-s),var(--base-d),0); */

Light mode:

# As it is in GitHub
--background-transparent:hsla(var(--base-h),var(--base-s),var(--base-l),0);

# Commented out
/* --background-transparent:hsla(var(--base-h),var(--base-s),var(--base-l),0) */

->

Tweak for #2 WITHOUT title rotation

Tweak #1 in the Minimal Theme CSS was applied first to get rid of the shadow.
Tweak #2 is in the Andy Mode CSS.

Feel free to change any of the settings here to your preference.

# As it is in GitHub
/* unset the title container height and swap padding */
.view-header-title-container {
  height: unset;
  padding-left: unset;
  padding-top: 5px;
}

-----------------

# Pushed title down
/* unset the title container height and swap padding */
.view-header-title-container {
  height: unset;
  padding-left: unset;
  padding-top: 200px; # Change this value here! 
}

There is a really awkward space between the icons and the top of the window which you can fix by changing the following code. Note that you’ll have to adjust the title padding to account for this. Note that it doesn’t completely fix the padding issue… it’ll look better if you have the header icon visible.

# As it is in GitHub
/* swap the padding/margin around for the header and actions icons */
.view-header-icon, .view-actions {
  padding: 10px 5px;
}

-----------------

# Removed icon padding
/* swap the padding/margin around for the header and actions icons */
.view-header-icon, .view-actions {
  padding: 0px 5px;
}
/* unset the title container height and swap padding */
.view-header-title-container {
  height: unset;
  padding-left: unset;
  padding-top: 170px;
}

-> push title down-> -> change icon padding ->

Tweak for #2 WITH title rotation

Tweak #1 in the Minimal Theme CSS was applied first to get rid of the shadow.
Tweak #2 is in the Andy Mode CSS.

I personally prefer to use the Turn spine titles the other way code. So in order to fix this issue, you change different settings. Start with the default Andy Mode CSS. Then tweak the settings for the Rotation Code.

# As the code is in the thread
.view-header-title-container {
  transform: rotate(180deg);
  text-align: right;
  margin-top: 10px;
}
.view-header-title-container:after {
  width: 0%;
}

-----------------

# Tweaked code
.view-header-title-container {
  transform: rotate(180deg);
  text-align: right;
  margin-top: 170px; # Change this line until the end of the line is 
}
.view-header-title-container:after {
  width: 0%;
}

-> Change icon padding -> -> Change rotation code padding ->

It’s definitely not a perfect fix… but it’s something. I tried to make it clear, but if there’s anything that’s confusing please feel free to ask.

4 Likes

Thanks for sharing!

1 Like

Really nice theme, only that I noticed the last note in file hierarchy is not clickable due to the hidden side bar. I hope there could be a margin at the bottom to avoid this.

Thanks to @death.au we now have a wonderful Sliding Panes (Andy Matushcak Mode) Plugin. Minimal Theme has been updated to make Sliding Panes a first class citizen. And it’s styled to fit in seamlessly with the rest of Minimal Theme.

You can now easily toggle it on and off with a hotkey, as seen below:

PS @idelem your issue has been fixed :slight_smile:

10 Likes

Hi. I don’t see the Close button. I have to exist Obsidian with ALT+F4. Is any way to re-enable it?

The theme is optimized for MacOS. If you are on Windows or Linux, you might run into some issues. I don’t have the ability to test this myself, but if you fiddle with the CSS you might be able to come up with a solution. The easiest is to comment out the “Frameless” section of the code.

If anyone reading this is using Windows/Linux and would like to assist, I’d love some help styling the window buttons so they work well on those operating systems.

1 Like

@mafsi - Commenting out the frameless section (lines 218-247) only gives back the top bar, not the buttons. To get the buttons back, you also need to comment out lines 29 & 30.

  /*.titlebar-button-container,
  .pane-list-item-ending-flair:not(.tag-pane-tag-count), /* Search counts */

Hacky for now, but it works.
Anyone else feel free to beat me to a more elegant re-addition of the menu bar. I may or may not take the time to dig deeper. This was a primary reason I’ve overlooked this very nice theme in the past. I may try it again.

@Erisred @mafsi If you grab the latest version of the theme, I just updated it with styling for the titlebar when frameless mode is turned off. So now you should be able to go to the “Frameless mode” section and comment it out or remove it. This will also take care of the issue you just shared.

2 Likes