How to customize CSS style in Obsidian — setting your own styling for the application interface themes using CSS snippets

The Obsidian knowledgebase app has a cool feature to customize the look of the interface with your own CSS styles. In this article, I've put together the basics of Obsidian styling and some tips to help you create a visually appealing workspace.

Create a style file

Go to the Obsidian repository folder, and create a new .css file in the snippets folder - this is the default folder for custom files, where Obsidian will look for them.

Check the settings

Now you need to enable custom CSS snippets in the settings, so that the application will add them to pages when they load.

Go to Settings -> Appearance -> CSS snippets and connect the created file by moving the slider.

Go to DevTools

Since Obsidian is a Chromium-based application (you can think of it as a browser with unnecessary functionality removed), we have access to the developer tools just like in a normal browser. Press Ctrl+Shift+I to open them.

Since there is no clear documentation on application styling, we can only rely on the existing document structure, classes and identifiers. If we want to style something, we have to go to the source code of the page and try to find a universal CSS selector.

You can select the necessary element with the element selection tool - it is located in the upper left corner of the developer's toolbar.

Enable it and hover the mouse over the element of interest on the screen. It will be displayed in the DOM structure in the developer tools.

Most likely, the element will have some class or id that can be used for styling. If it doesn't have one, you can try to base your styling on the parents.

There is a trick to creating a temporary style file while viewing a web page. Click the «Add new style rule» button - it will enter the selector of the current element.

You can check if the selector is correct right here - just enter your variant, and see how it will be displayed - black (active) or gray (inappropriate).

If you hover over a selector with your mouse, all elements corresponding to that selector will be highlighted. This is also very convenient, because some selectors can affect different blocks of the page - you have styled the menu, and at the same time corrected the lists in the article, for example.

The rules added in this way will also be saved to a temporary inspector-stylesheet file. You can do all the styling in the browser and then open inspector-stylesheet, copy the code and paste it into your custom CSS file in the Obsidian repository.

Just click on the file name and it will open in the «Sources» tab. Note that previously entered inactive selectors will not show up in the stylesheet of the current element, but will remain in inspector-stylesheet — this is something to keep an eye on. Remove them before putting them into the Obsidian stylesheet so they don't get in your way later.

Change stylesheet

By following the instructions above, you can style any element of the page - both user-generated content and the application interface. If the rules don't apply, try using !important for them — the base styles probably use a weightier CSS selector.

Save the styles to a file

After styling, save the resulting set of rules to the CSS file created in the first step.

Reload the application

While in the developer tools, press Ctrl+R - this will initiate a reload of the application. You can also close and open the app, but I find this method a bit faster.

After the reload, the new styles should apply. Don't forget about the !important nuance. If some styles don't work - you can open developer tools again, select the desired element and look at its CSS rules - maybe there is a syntax or priority error somewhere.

Example

I really wanted to make different colors for files in the notes tree: .xlsx - green, .docx - blue and so on.

Here is a CSS example of how to do it (you can set colors for any other file extension in the same way):

.nav-file-title[data-path$=".xlsx"] .nav-file-tag,
.nav-file-title[data-path$=".xls"] .nav-file-tag,
.nav-file-title[data-path$=".xlsm"] .nav-file-tag,
.nav-file-title[data-path$=".csv"] .nav-file-tag {
  background-color: #1F7244;
  color: #fff;
}
.nav-file-title[data-path$=".xlsx"]:hover .nav-file-tag,
.nav-file-title[data-path$=".xls"]:hover .nav-file-tag,
.nav-file-title[data-path$=".xlsm"]:hover .nav-file-tag,
.nav-file-title[data-path$=".csv"]:hover .nav-file-tag {
  background-color: #1F7244;
  color: #fff;
  opacity: 0.8;
}

.nav-file-title[data-path$=".docx"] .nav-file-tag {
  background-color: #114CAF;
  color: #fff;
}
.nav-file-title[data-path$=".docx"]:hover .nav-file-tag {
  background-color: #114CAF;
  color: #fff;
  opacity: 0.8;
}

Remove automatic line breaks in pre code examples in preview mode (so that they take up less vertical space and have a horizontal scroll bar):

.markdown-preview-view pre,
code[class*="language-"], pre[class*="language-"] {
  overflow: auto !important;
  white-space: pre !important;
}

You can make a more ascetic Obsidian tag button design in the note if you don't like the standard one.

a.tag:hover {
    background: rgb(240,240,240);
}
a.tag, a.tag:hover {
    background: transparent;
    border: 1px solid rgb(50,50,50);
    border-radius: 4px;
    color: rgb(50,50,50);
    padding: 0.3em 0.8em 0.4em 0.8em;
}

Community Themes

If you're tired of making changes on your own, Obsidian offers a variety of community themes - some make cosmetic changes, and some radically change the entire interface of the app.

To choose a theme, go to Settings -> Appearance -> Themes and click Manage.

A catalog of available themes will be presented, each of which you can view and read a description from the authors.

You can install any of the themes, and your CSS settings will also be applied unless disabled in the settings. This way you can customize not only the standard Obsidian look, but also custom themes.