Guide for syncing highlight colors when saving to Obsidian

Learn how to sync the highlight colors from Omnivore to Obsidian

Recently, we added multiple highlight colors on the web. You can choose from four different options, as seen below.

Now, you can sync those highlight colors into Obsidian via the Omnivore to Obsidian plugin.

In this guide, we will present the steps and templates necessary for this to work.

All this is possible thanks to Pokebowl - our Discord community member who created the code and templates.

Let’s dive in!

First step: create the CSS file

We are assuming that you already have installed and activated the Omnivore to Obsidian plugin. If not, check our Docs page for details.

Create a CSS file with the following code (we name it omnivoreCallouts.css, but you can name it whatever you’d like), add it to the Obsidian CSS snippets folder, and activate it. (Appearance > CSS Snippets >  activate via radio button):

/* Callouts for Omnivore Highlights */

.callout[data-callout="yellow"] {

--callout-color: 244, 188, 91;

}

.callout[data-callout="red"] {

--callout-color: var(--callout-error);

}

.callout[data-callout="green"] {

--callout-color: var(--callout-success);

}

.callout[data-callout="blue"] {

--callout-color: var(--callout-info);

}

Second step: set the Article template

In the Omnivore plugin menu, add the following template in the Article template section:

# {{{title}}}
## Meta
@[{{siteName}}]({{{originalUrl}}})
==@[Omnivore]({{{omnivoreUrl}}})==

{{#highlights.length}}

{{#note}}

## Note
{{{note}}}
{{/note}}

## Highlights

{{#highlights}}
>[!{{color}}]+ {{dateHighlighted}} [⤴️]({{{highlightUrl}}})
>{{#labels}} ==tags:== **#{{name}}** {{/labels}}
> {{{text}}}
{{#note}}
>>[!abstract]+ Notes
>>{{note}}
{{/note}}

{{/highlights}}
{{/highlights.length}}

## Content

{{{content}}}

This template will sync notes, highlights and their colors, the date when the highlight was made, and the full content of the saved link. It should look like this:

Third step: testing

Now that we set everything up, it’s time to test it. Head to Omnivore web, apply some highlights (and the custom query if you have one), then return to Obsidian and click on the Omnivore icon, or run the command Omnivore: Sync.

You should have the highlights saved like this in Obsidian:

A few details about settings

The testing ecosystem for this guide has the following settings:

The Omnivore plugin has the Filter option set to Advanced, the sync is saved on a label, and the Highlight Order is set to the location of highlights in the article.

The Obsidian theme is Minimal with the Flexoki color scheme.

Wrapping up

We made sure to make the Obsidian plugin for Omnivore as flexible as possible so that the community could come up with ways of using it that we couldn't have predicted. Pokebowl's work is a great example of this, taking advantage of template variables and CSS to create a smooth integration with Obsidian.

We're excited to see what else the Omnivore community will come up with using the tools we're building!