In Blue Topaz theme it is possible to highlight with different colors, by choosing background colors for
*== highlight ==*
**== highlight ==**
***== highlight ==***
This is a very neat solution for when you wish to use more highlighting colors.
How could this be done with a CSS snippet to make this functionality independent of the theme?
I went digging in the theme to find this. The first lines are my own that I picked up from someone else. The trick is you need to first say “not” bold or italic, otherwise they keep overriding the bold+italic.
.theme-dark { --italic-weight: 400; --italic-color: #fff0c4;}
.theme-dark { --bold-weight: 900; --bold-color: #a4f0ff;}
.theme-light { --italic-weight: 400; --italic-color: #aaaa00;}
.theme-light { --bold-weight: 900; --bold-color: #00aaaa;}
*:not(font)>em>strong,
*:not(font)>strong>em,
.cm-strong.cm-em {
color: #ffc4f0;
}
For the full Blue Topaz snippet (with rainbow effect) you can find the code around line 13659 in theme.css. You probably can’t just grab this snippet alone, because the theme uses variables.
*:not(font)>em>strong,
*:not(font)>strong>em,
.cm-strong.cm-em {
padding-right: 0.05em;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: #f55454;
background-image: linear-gradient(120deg, var(--strong-em-color-1) 0%, var(--strong-em-color-2) 80%);
font-family: var(--font-family-strong) !important;
}
Could this be done specifically for highlights, without affecting the text itself?
When applying bold and italics to a highlight, the Blue Topaz theme only changes the highlight color, the text itself does not change to bold or italics.
Yes you can, if you look at the Blue Topaz code you can see how they use the background color and border radius, etc.
