Prime is a simple theme for Obsidian that is customizable and has some neat features.

The motivation behind creating this theme was that I wanted a simple theme that only adds some color tweaks instead of introducing huge changes that modify the positioning of elements, font styles, etc. It started as an experiment, and I added some features that I'd like to use, such as syntax highlighting themes for code blocks, emojis as callout icons, and gradient frames (inspired by Anuppuccin's Colorful Frames — which is adapted from the Minimal theme.)

This theme uses Style Settings for easier customization.

You can buy me a coffee to support my work:

Screenshots

Installation

Obsidian Themes

1. In Obsidian, go to Settings
2. Open the Appearance tab
3. Click Manage in Themes
4. Search for "Prime"
5. Click Install and use 🎉

Manual

1. Clone this repository:

git clone [email protected]:rivea0/obsidian-prime.git

2. Create a folder named Prime inside the .obsidian/themes directory in your vault:

mkdir -p <path/to/your/vault>/.obsidian/themes/Prime

3. Copy theme.css and manifest.json to the Prime directory:

cp theme.css manifest.json <path/to/your/vault>/.obsidian/themes/Prime

4. Choose Prime from the Themes section under Appearance in Obsidian Settings 🎉

Features

Syntax Highlighting Themes

Sometimes you want to use different themes for code blocks depending on your mood. (Right? 😐)

prime-syntax-theme-change-demo.mov

There are several theme options with dark and light variations. The default for the dark theme is Dracula, and for the light theme, an adaptation of Material Theme Lighter.

Dark Theme Options

Dracula (Default)

One Dark

Catppuccin Frappé

Catppuccin Macchiato

Catppuccin Mocha

Halcyon

GitHub Dark

Tokyo Night

Light Theme Options

Material Lighter (Default)

One Dark (Light Variation)

Catppuccin Frappé

Catppuccin Latte

GitHub Light

Tokyo Night Light

Custom Checkbox Styling

Basic

- [ ] to do
- [/] incomplete
- [x] done
- [-] cancelled
- [>] forwarded
- [<] scheduling

Extras 2

- [?] question
- [!] important
- [*] star
- ["] quote
- [l] location
- [b] bookmark
- [i] information
- [S] savings
- [I] idea
- [p] pros
- [c] cons
- [f] fire
- [k] key
- [w] win
- [u] up
- [d] down
- [D] draft pull request
- [P] open pull request
- [M] merged pull request

Extras 3

- [m] mail
- [h] heart
- [a] archive
- [e] eye
- [s] search
- [r] rocket
- [8] infinity
- [g] goal
- [+] positive
- [n] negative

Snippets

Callout Emojis (with skin tones!)

You can add emojis as icons for your callouts just like usual type identifiers. For example, adding [!cake] inside a blockquote like this:

> [!cake] Delicious custom title
> Here is a callout block

Will display:

You can also choose skin tones for the emojis that support them.

Usage:

You can easily navigate to the link using Style Settings:

1. In Obsidian Settings, go to Style Settings under Community Plugins
2. Select Prime
3. Click the link under the heading Callouts with Emoji Support ✨
4. Download the callout-emojis.css file that is opened
5. Add it to the snippets directory in .obsidian inside your vault
6. Go to Appearance tab, and enable callout-emojis under CSS Snippets

Or:

1. Download https://github.com/rivea0/obsidian-prime-snippets/blob/main/callout-emojis.css
2. Add it to the snippets directory in .obsidian inside your vault.
3. Go to Appearance tab, and enable callout-emojis under CSS Snippets

Note: You can use the Style Settings plugin to easily switch between skin tones.

Emojis are chosen from OpenMoji.

See the list of all the emojis, examples, and how to extend them here: https://github.com/rivea0/obsidian-prime-snippets#callout-emojis

Gradient Frames

You can add some color to your vault with gradient frames. This feature is pretty much inspired by Anuppuccin's Colorful Frames — which is adapted from the Minimal theme.

You can also easily choose the linear gradient direction (top or bottom) using Style Settings.

Usage:

You can easily navigate to the link using Style Settings:

1. In Obsidian Settings, go to Style Settings under Community Plugins
2. Select Prime
3. Click the link under the heading Gradient Frames ✨
4. Download the gradient-frames.css file that is opened
5. Add it to the snippets directory in .obsidian inside your vault.
6. Go to Appearance tab, and enable gradient-frames under CSS Snippets

Or:

1. Download https://github.com/rivea0/obsidian-prime-snippets/blob/main/gradient-frames.css
2. Add it to the snippets directory in .obsidian inside your vault
3. Go to Appearance tab, and enable gradient-frames under CSS Snippets

There are 42 gradients chosen from WebGradients.

See the list of all the gradients, examples, and how to extend them here: https://github.com/rivea0/obsidian-prime-snippets#gradient-frames

Credits

• Thanks Anuppuccin by @AnubisNekhet for the amazing use of Style Settings — which I learned from — and of course, for the gradient frames inspiration. Both of these were eventually adapted from the Minimal theme by @kepano.

You can buy @AnubisNekhet a coffee.

You can buy @kepano a coffee.

• Fancy highlighting is adapted from the Things theme. The syntax colors for the One Dark theme, and custom checkbox styling are also mainly from Things.
• Custom checkbox styling is credited to the Minimal Theme.

You can buy @colineckert (creator of the Things theme) a coffee.

• Dracula theme syntax colors from Dracula Gemini.

• Catppuccin themes syntax colors from Catppuccin Obsidian.

• Halcyon syntax colors adapted from Halcyon Obsidian.

• GitHub theme syntax colors from GitHub theme.

• Syntax coloring for Material Lighter adapted from https://material-theme.com/docs/configuration/color-schemes.

• Tokyo Night syntax colors from Obsidian Tokyo Night.

License

GPLv3