Minimal Theme

[kepano]

Overview

Minimal is an opinionated Obsidian theme designed to the create the most natural and distraction-free environment for thinking. And now, winner of the best theme of 2020 award — neat!

Minimal and my plugins are offered as pay what you want software. If you enjoy using them, consider supporting my work via Patreon, Buy me a coffee or following me @kepano on Twitter.

Installing Minimal

To get the best experience I recommend installing all three of the latest versions:

• Minimal Theme, available in community themes.
• Minimal Theme Settings plugin, available in third-party plugins. Allows you to customize fonts, colors, and more details of the Minimal Theme.
• Hider plugin, available in third-party plugins. Allows you to selectively hide parts of the Obsidian interface. (Also compatible with other themes)

Disclaimer

This theme is provided as is, and is focused on my personal use of Obsidian on macOS. As such it is not thoroughly tested across all operating systems and features of Obsidian.

This theme modifies significant parts of the Obsidian interface, so it might break with future updates. It may also be incompatible with other bits of custom CSS you have. The theme file is organized in such a way that you can easily find sections to override using CSS snippets.

Goals

• Simplify the UI to create a focused editing experience
• Keyboard-first design as a philosophy behind which features to hide
• Bring Obsidian closer to the macOS Human Interface Guidelines with native fonts and conventions
• Polish improvements on par with Bear, Notion, Apple Notes and other minimally designed note-taking apps

Polish improvements

• Focus Mode, everything but the text is hidden when sidebars are collapsed
• Nicer checklists similar to Apple Notes
• Pill-style tags
• Click to zoom on images
• Default arrow cursor for UI elements
• Long file names are trimmed with ellipses to fit on a single line

Plugin support

• Sliding Panes (aka Andy Mode)
• Calendar Widget

Screenshots

[kepano]

The theme has been updated with a few options that you can toggle on/off at the top of the file. I personally have all of these turned off, but I can imagine some folks wanting them.

• Status bar
• Tooltips
• Scroll bars
• File matches
• Root name

[brapstallion]

I’m really digging this. Thank you!

[3mbry0]

Hello. Love the theme! I have noticed some minor issues regarding bullets.

When I create double line breaks between bullets, they work fine on edit mode but on preview, the paragraph is no longer in the same line as the bullet. Here’s what I mean:

Edit mode:

Preview:

Another issue in preview is that when a number list is below a bullet, a bullet appears in front of the numbers.

But the bullet doesn’t appear when there’s no bullet list

[kepano]

@3mbry0 — thanks I’ll address these shortly. If it’s an immediate problem for you, you can comment out the section called “Lists” from the CSS and it should work again for you.

[tward09]

Is there a way to re-enable the “link” button in Unlinked Mentions?

[jellyfish]

Love the theme! The focus mode is great.

When I go to bold something (with “**”), the bold doesn’t show up in the preview or editor mode. Is there a way to fix this?

[kepano]

@jellyfish What OS do you use? Bold is currently set to 500 instead of 600. It’s possible that your OS doesn’t have a 500 weight font installed. Try downloading the latest version of the theme. I’ve added a setting that allows you to change the weight from 500 to 600.

[kepano]

Yes, you will need to remove the “File matches” rules at the top of the CSS settings in the “Disabled features” section.

[MitchWagner]

This theme looks very familiar in dark mode. I can’t quite place what it reminds me of, but it is very daring of you to make the creative choices you did. I can tell that, as a designer, you’re a regular fireball!

[kepano]

This should be fixed in the latest version!

[kepano]

Hah! I just added a special feature just for you. You can now easily change the colors of the theme using HSL!

Go to the top of the file and try changing the color values to these:

--color: 210, 10%;
--d: 32%;

[ryanjamurphy]

Made for the Minimal theme: a Keyboard Maestro macro to enable/disable a zen/focus mode: Zen/focus mode with automation

[Rishi]

That’s quite a clever solution to toggle modes! This and the Pisum theme’s ability to use Andy mode in the light version are both ingenious in their own ways. The mode switching to toggle seems quicker since it works with a hotkey in Obsidian and requires no 3rd party app. But your solution seems more flexible. In fact, I think it can be extended to even switch themes entirely by picking a random one from a folder full of Obsidian.css files. Imagine having a new theme everyday! That or different colours for each day of the week. The possibilities seem endless. Thanks for sharing!

[ryanjamurphy]

Oh, totally. You can extend the pattern I set up (append CSS to enable and find-and-replace CSS to disable) to create ways of turning on and off a variety of CSS only features. I’ll do Andy Mode next.

I like the light/dark toggle hack though… clever.

[kepano]

Various improvements have been made to the theme which you can grab from the Github repo, or now directly from the Community Themes in Obsidian Settings.

• Most of the theme colors including accent color for links are now driven by a few HSL values that you can customize meaning that the backgrounds, borders, and various shades are automatically generated for you.
• Better documentation of options (see top of the CSS file)
• Small fixes for 0.8.2
• Various fixes to issues with bulleted and numbered lists

[mcx]

It’s my favorite dark theme. I want to change the font to Courier Prime, but I don’t know how to do it in the css file. Could you help me?

[tward09]

On Mac:

After you have installed the font into Font Book, open the obsidian.css file in Text Edit and change the font-family:

body, input, button, .cm-s-obsidian .cm-formatting-hashtag, .cm-s-obsidian {
font-family: "Courier Prime" !important;
letter-spacing:0.02rem;
font-size:var(--font-normal);
-webkit-font-smoothing:subpixel-antialiased !important;

Save and it should change to the correct font.

[ayrtonsom]

I really love this theme! It is both useful and nice-looking, but I haven’t been able to tweak a couple of typographical things that I always change in my custom CSS. I hope I don’t come across as being overly picky, I’m honestly trying to learn how Obsidian theming works and Minimal is my favorite one so far.

How can I set a different font for the Edit mode only?

EDIT: I figured this one out. The usual CSS I would add at the end of the file was this:

.markdown-source-view {
   font-family: 'IBM Plex Mono', monospace;
}

It worked on the default theme and on some other themes I’ve tried, but it wasn’t working with Minimal. The right way to target the source view was this:

.cm-s-obsidian {
   font-family: 'IBM Plex Mono', monospace !important;
}

The !important needs to be there because the theme already uses it for setting the general font for the whole interface, so it won’t override it unless you set this font-family property to !important as well.

---

How to enable contextual alternates when using Obsidian’s default font?

On the other hand, I’d also like to make Minimal work with Inter, which is Obsidian’s default font, but I can’t seem to enable the contextual alternates feature. An example of a contextual alternative is when the software changes a hyphen and a greater-than sign -> into a beautiful -> arrow glyph. This is enabled by default in Obsidian, and it even works right here in the forum, but when I edit Minimal’s CSS in order to use Inter by using --text:"Inter"; the contextual alternatives stop working.

This OpenType feature is supposed to be enabled by default in CSS, but I nonetheless tried specifying it with:

html {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

But it isn’t working. I’m not sure if this can be easily done, but I’d love to hear from the developers of the theme to see if they have an idea of why this happens, since I can’t find anything in the theme’s CSS that could be overriding the contextual alternatives feature.

Sorry again for getting so hung up on nerdy typographical features, but I’m a typography student and I obsess over these kind of things. Still, this is my favorite Obsidian theme! It’s really helped me focus on my writing, while making Obsidian look beautiful in the process.

[mcx]

Thank you!