Highlight Colours
On this page
This is part of my Tenebrous theme.
Obsidian lets you highlight text in six colours.1 In my vault each highlight starts with a coloured emoji, such as 🔴, and the emoji says which colour it is. The theme then gives each colour its own tint, so a highlight in the app and a highlight on this site match.
The colours
- 🔴 Red
- 🟠 Orange
- 🟡 Yellow
- 🟢 Green
- 🔵 Blue
- 🟣 Purple
Circles, squares and hearts all work, so 🟥, 🟦 or 💜 would pick the same colours.
This site also has four more hues, in case Obsidian adds them or I want them for something else.
These four only work on Quartz
Obsidian itself only knows the six colours above. In the app, and on Obsidian Publish, cyan, pink, brown and silver show as plain highlights, because CSS cannot select a highlight by its emoji. The site build reads the emoji and adds a class, so the colours appear only on this Quartz site.
- 🩵 Cyan
- 🩷 Pink
- 🤎 Brown
- 🤍 Silver
The CSS
Highlighted text stays silver, and the background is 28% of the hue with a thin outline in the same hue. The text is at least 4.5:1 against every tint, which keeps it readable.
// Only the Quartz site uses these classes. Obsidian itself knows six colours, red to
// purple, and cyan, pink, brown and silver do nothing in the app or on Publish, because
// CSS cannot select a highlight by its emoji. The build adds the class on the site.
.markdown-reading-view .text-highlight {
color: var(--silver);
@each $name, $hue in (
"red": var(--red),
"orange": var(--orange),
"yellow": var(--yellow),
"green": var(--green),
"blue": var(--blue0),
"purple": var(--purple),
// Quartz only, from here to the end of the list.
"cyan": var(--cyan),
"pink": var(--pink),
"brown": #b0825a,
"silver": var(--silver)
) {
&.hl-#{$name} {
background-color: color-mix(in srgb, #{$hue} 28%, transparent);
box-shadow: 0 0 0 1.5px color-mix(in srgb, #{$hue} 75%, transparent);
}
}
}The site build adds the hl- class from the emoji, because Quartz drops the colour when it renders a highlight.