Learn how to modify aspects of the Obsidian application's appearance without needing to build a theme.

If you're looking for guidance on handling CSS for Obsidian Publish, be sure to review Customize your site.

CSS is a language that controls how HTML looks. By adding CSS snippets, you can change parts of the Obsidian user interface, like the size and color of headings. Obsidian has CSS variables that help you customize the interface easily.

Obsidian looks for CSS snippets inside the vault's configuration folder.

Adding a snippet

To add a CSS snippet on Desktop, follow these steps:

Open Settings.
Under Appearance → CSS snippets, select Open snippets folder.
In the snippets folder, create a CSS file that contains your snippet.
In Obsidian, under Appearance → CSS snippets, select Reload snippets to see the snippet in the list.
Enable snippet by clicking the toggle.

To add a CSS snippet on Mobile/Tablet, you can follow these steps:

Open a file manager and find your vault. You can check the vault’s location in Manage vaults… by tapping your vault and looking at the path.
Open the Configuration folder and create a folder called snippets if it doesn’t exist.
Add your CSS snippet to this folder.
Open Obsidian's Settings.
Select Appearance on the left.
Scroll down to the CSS snippets section.
Tap Reload snippets to refresh the list.
Tap the toggle to enable the snippet.

Alternatively, you can

Sync any changes with your syncing service.
Use a community plugin to create a snippet from within Obsidian.

Once enabled, Obsidian will automatically detect changes to CSS snippets and apply them when you save the file.

You don’t need to restart Obsidian for changes to take effect. However, you might need to use the Command palette command to Reload Obsidian without saving to see changes in the current theme or note.

Writing CSS for Obsidian

Obsidian offers several methods that make writing CSS easier and more powerful.

It has a host of CSS variables to easily modify parts of Obsidian and a built-in property type to change the appearance of one or several notes.

Variables

Create a file called headers.css with the following content to change the colors of the six heading levels to a rainbow:

body {
  --h1-color: red;
  --h2-color: orange;
  --h3-color: yellow;
  --h4-color: green;
  --h5-color: blue;
  --h6-color: pink;
}

CSS classes

Assign the name of a custom CSS class (or a list of CSS classes) to a predefined property cssclasses to make one or more notes look different from others.

CSS:

.red-border img {
   border-color: #ff0000;
   border-style: solid;
}

YAML/Properties:

cssclasses:
 - red-border

In every note that contains the value red-border in the cssclasses property, images are displayed with a red border.

To ensure that the CSS file is valid and formatted correctly, we advise validating it with a tool like CSS Validation Service, as invalid CSS will not work.