How to Create an Obsidian Theme

This weekend, I finally decided to learn how to create my very own Obsidian theme instead of just customizing existing themes using CSS snippets.

This tutorial will cover the fundamentals of creating a brand new, completely custom theme for your Obsidian Vault.

This guide assumes you have a basic knowledge of web development including HTML and CSS.

Step 1: Set Up Your Theme Files

1. Open Obsidian and navigate to Settings > Appearance > Themes.
2. Click the folder icon next to “Themes” to open the themes folder in your file explorer to see the path.
3. Create a new folder within the themes directory for your theme, for example, MyTheme.
4. Inside the new folder, create two files: manifest.json and theme.css.

Step 2: Configure manifest.json

The manifest.json file is essential for defining your Obsidian theme.

1. Open the manifest.json file in your preferred code editor.
2. Add the following JSON structure to define your theme:

   {
     "name": "MyTheme",
     "version": "1.0.0",
     "author": "Your Name",
     "description": "A custom theme for Obsidian",
     "minAppVersion": "0.12.0"
   }

2. name: This is the name of your theme. It will appear in the theme selection menu in Obsidian.
3. version: This indicates the current version of your theme. Versioning is useful for keeping track of changes and updates.
4. author: This specifies the creator of the theme. You can put your name or any identifier you prefer.
5. description: A brief description of your theme. This can help users understand what your theme is about or its unique features.
6. minAppVersion: This specifies the minimum version of the Obsidian app that your theme supports. This ensures compatibility and prevents users from applying your theme on unsupported versions.

Now that you’ve set up your manifest.json, you can activate your theme, via Settings > Appearance > Themes:

As you can see this manifest.json file helps Obsidian recognize and apply your custom theme correctly, ensuring that users see the right information and that your theme works with the appropriate version of Obsidian.

Step 3: Style with theme.css

Obsidian has over 400 CSS variables you can leverage in your theme when customizing the interface.

To customize the Inline Title let’s:

1. Open the theme.css file in your code editor.
2. Start adding your CSS to style the Obsidian interface.

In this example, we’ll take a look at customizing the Inline Title which is the title of each note. The documentation for its properties is here.

body {
    --inline-title-color: #6e2da0; 
    --inline-title-font: 'Arial', sans-serif; 
    --inline-title-line-height: 1.5; 
    --inline-title-size: 50px; 
    --inline-title-style: normal; 
    --inline-title-variant: normal; 
    --inline-title-weight: bold;       
 }

You’ll receive instant feedback and see your CSS changes in Obsidian as soon as the file is saved.

Step 4: Inspecting Obsidian Elements using Developer Tools

While the documentation is vast, there will come a time when you need to use the dev tools to inspect elements you see.

The good news is, if you’re familiar with web development, Obsidian is packaged in Electron, so you can use your familiar browser tools to inspect DOM elements.

You can open the developer tools in 2 ways:

1. Navigate to the menu View > Toggle Developer Tools
2. Use the shortcut Cmd+Option+I on Mac or Ctrl+Shift+I on Windows

That’s basically it. You can add as little CSS to your theme as you want or completely customize every component of the application!

For your convenience here is a list of resources I used:

• obsidianmdobsidian-sample-theme
• Obsidian Developer Docs
• CSS variables
• Manifest
• Versions