Using the custom palettes feature to see brand colors in Obsidian

[GRA0007]

As of v1.4.0, this plugin now supports custom palettes, so I thought I'd share an example use-case for a shared company Obsidian vault that has some brand colors we can define, rather than using the hex codes everywhere.

This is our sample page with documentation about the fictional "ACME" website. You can see how the color names are being enhanced with inlays to preview the colors.

And this is what the page looks like in source mode, so you can see the exact syntax we use to achieve this (and what it would look like without the plugin installed).

To get this to work, we first enable the "custom palette" support in the plugin settings, then create a CSS snippet file with the following content.

.css-color-inlay {
  &.acme-cream { color: #FFEDCC; }
  &.acme-on-cream { color: #1C1A15; }
  &.acme-orange { color: #ED7411; }
  &.acme-green { color: #489134; }
}

This tells the plugin to look for inline code blocks that start and end with parenthesis, and contain one of the names from our CSS snippet.

Important

Palette names are converted to lowercase and all spaces are replaced with hyphens, so your CSS snippet file should only define classes with these requirements in mind.

If you have any questions about the above setup, feel free to leave a message below, or if you find a bug or want to request a new feature, make an issue.