Customizing Obsidian's look

11 Sep, 2024

In one of my recent random browses across the internet, I came across the project The Monospace Web by Oskar Wickström. The beauty of this page inspired me a lot and I wondered if I could replicate its aesthetics as my Obsidian theme. I hadn't tweaked Obsidian's appearance until that point, at first because I found the stock version good enough and second because I was too lazy to figure out how to customize it. I was glad to learn that Obsidian makes it a breeze to apply your custom styles with CSS and within 15 minutes I had already reached a point at which I was happy with what I had achieved.

Raison d'être

Everything you will read here can be found in Obsidian's documentation. My intention with this article is to document my exploration, preach about Obsidian, and exercise my writing skills but I hope it can be useful for someone out there.

The font

Even though the font's name used is not mentioned in the text, a glance at my browser's Network requests tells me that JetBrains Mono is the one in place. Luckily enough this font is free to download, so I could install it easily on my computer.

With the font installed, you can go to Obsidian's Settings and select the Appearance tab. There you should find the Fonts section where three possible fonts can be set – Interface, Text, and Monospace. The first one is the font of menus and the folder tree, the second Text, will inherit the value of Interface if not explicitly set while the third Monospace, is the font where code blocks between backticks (``) will be displayed. In my situation, I only set Interface and Monospace to "JetBrains Mono" and left Text unset, now there's a single font for everything. I prefer it like this 🤷.

The CSS snippet file

Scrolling the Appearance tab further down to the bottom you should be met with the CSS Snippets section. There you can click on the folder icon to figure out where your custom CSS file should be placed, it should be something like <vault_path>/.obsidian/snippets/. Once the folder location is known, you can go there with any code editor you prefer and create a file snippet.css (it can be any name actually) inside it.

The example of the official documentation shows how to change the text color which can be done like this:

/* snippet.css */
body {
    --text-normal: red;
}

[!NOTE] CSS variables You can see that --text-normal is the name of a variable conveniently provided by the Obsidian team. When customizing the appearance of your Obsidian it is useful to look first for CSS variables that address your needs before targeting any specific selector.

Once a CSS file is saved into the folder you may see its name popping up in the snippets section where you can toggle it on or off. If everything goes well you should see the UI text of Obsidian turning red. Now any change in that file should be instantly reflected in the tool.

snippet-config

DevTools

I knew Obsidian was built on top of Electron, which makes it the first app that I liked with that property, I was surprised nevertheless that I could resort to my beloved DevTools with the shortcut Option + Command + i (or similar in your OS) whenever I wanted to inspect an element on the UI. This was especially useful for figuring out which CSS variable was applied to a given element.

Whole CSS file

In the end, the most rewarding part was that I could alter the UI to something close to what I wanted only by tweaking variables. The end product was not reached immediately and some tweaks came later when I noticed I wasn't pleased with how some elements looked like.

body {
    /* checkboxes */
    --checkbox-radius: 0;
    --checkbox-border-color: var(--color-base-100);

    /* blockquotes */
    --blockquote-border-color: var(--text-normal);

    /* lists */
    --list-bullet-radius: 0;
    --list-marker-color: var(--text-normal);
    --list-indent: 1.80em;

    /* table */
    --table-border-color: var(--text-normal);
    --table-border-width: 2px;

    /* headings */
    /* I prefer smaller headings so I shifted each heading one unit down (i.e. h1 becomes h2, h2 becomes h3, etc) */
    --h1-size: 1.602em;
    --h2-size: 1.424em;
    --h3-size: 1.266em;
    --h4-size: 1.125em;
    --h5-size: 1em;

    --h1-weight: var(--h2-weight);

    /* horizontal line */
    --hr-color: var(--text-normal);
}

Screenshots

Light

theme-light

Dark

theme-dark

Publish as an actual theme?

I haven't used any Obsidian theme before so it feels weird to publish one without checking out other people's work first. Similarly, these changes have been solely targeted for my use case and it may contain blind spots where the aesthetics won't fit components I don't make use of. But who knows in the future!

#obsidian css