Highlighting Titles (and other Rem) in Grey

Hello all,

a question: how can I highlight headings (h1, h2, h3) and other elements in gray?

It is possible to background them with blue, yellow, red, etc., but not in gray - and gray is a neutral color. Gray allows me to render my documents and notes visually clearer, without the color having too much of its own expressiveness. (Red, for example, is often associated with the meanings of danger, important, urgent, etc. Grey, in this area, works neutral.)

  • Can this be done with custom css (how?)
  • Or would this be a feature wished by more people than just me (so that it could maybe be added in a future update?)

Thanks for helping out! :slight_smile:

Video: Make Grey Highlight with Custom CSS.

.highlight-color--red {
	background-color:grey;
	color: white; /* If you want to change text color */
}
.highlight-color--yellow {
}
.highlight-color--orange {
}
.highlight-color--green {
}
.highlight-color--blue {
}
.highlight-color--purple {
}


.rem-header--1 {
	background-color:grey;
	color: white !important;
}
/* If you want all Header 1,2,3 is highlight with Gray */
.rem-header--1, .rem-header--2, .rem-header--3 {
	background-color:grey;
	color: white !important;
}

Thank you very much. This looks amazing.

One question though - how can I have the letters in white, once they are highlighted in grey?
(Concerning the Headers 1, 2, 3 in your example) Black letter on grey background unfortunately make for bad readability.

Thanks again!

@Chinchivi
add color: white !important; It will make letters in white…
You can watch the video I recorded

@TaQuangKhoi: Ah, sorry, my mistake. Thanks for answering anyway. Was not reading close enough. Well, this is wonderful - thank you very much!