How can I change Highlight Colour + Highlighted Text Colour? (No plugins please)

What I’m trying to do

I wish to have some custom CSS to not only change the colour of a highlight to whatever I specify, but also the actually font colour of the text I highlight please.

For example, if I wanted highlighted text to be on a blue background with yellow, I would like to achieve this without any 3rd party plugins, CSS snippets only please.

Does anyone know how to do it?

Things I have tried

Ive tried searching this here and on reddit, but people either give solutions that are HTML based (Im looking to stick to CSS snippets) or require the use of plugins.

Is there a solution that just uses CSS?

Thanks!

1 Like

You can change the styling of highlights using CSS snippets, but either you change it for all of them or for a given note (using cssclasses in that note).

It’s not possible to add parameters to the highlight to make a single highlight have a different styling. That would indeed either need some additional html, or some plugin stuff to extend the markup for highlights.

Oh maybe I wasn’t clear - I want to have the same styling across the entire vault. So I don’t want individual highlights to be different - I just want a way to change the highlight background and text colour using CSS.

Do you know of any CSS for that?

Slightly lazy today, but does the answer below answer your question (and does it still work)?

Or possibly this slightly newer answer:

2 Likes

Those still look good holroy :+1:

/* ==highlight== background */
body {
    --text-highlight-bg-rgb: 255, 208, 0;
    --text-highlight-bg: rgba(var(--text-highlight-bg-rgb), 0.4);
}

/* ==highlight== text color */
.cm-s-obsidian span.cm-highlight, .markdown-rendered mark {
    color: blue;
}

You can separate these out by light and dark theme mode if need be, and the --text-highlight-bg: can be replaced with a color, rgb, hex, etc. e.g.

.theme-dark {
    --text-highlight-bg: orange;
}

but I would change the --text-highlight-bg-rgb: 255, 208, 0; values to get the alpha/opacity option in the second --text-highlight-bg property.

I used the code:

/* ==highlight== background */
body {
    --text-highlight-bg-rgb: 255, 208, 0;
    --text-highlight-bg: rgba(var(--text-highlight-bg-rgb), 0.4);
}

/* ==highlight== text color */
.cm-s-obsidian span.cm-highlight, .markdown-rendered mark {
    color: blue;
}

But unfortunately it didnt work at all (literally copied and pasted it, so nothing changed).

Does this same snippet work for you?

Yes, it is fine. Using:

body {
    /*--text-highlight-bg-rgb: 255, 208, 0;*/
    --text-highlight-bg: orange;
}

.cm-s-obsidian span.cm-highlight, .markdown-rendered mark {
    color: blue;
}

results in (for both Editing and Reading views):

Screenshot 2023-12-20 at 14.38.40

And the source text:

# heading h1

sasasasa text

==hey there highlight==

A few things to check:

  • is the file a valid .css file?
  • is it in {VAULTNAME}/.obsidian/snippets/ ?
  • is the snippet enabled?
  • if you are using a community theme, is that interfering in some way?

Ah yes I can confirm it works - however I noticed that I have an embedded query for a specific tag on a page, and the results arent as expected.

To answer your questions, I am using the default theme with basically zero plugins.

Edit:

To clarify the issue, it seems like the highlight colour and text change is perfect, but when it comes to the text inside an embedded query, the text does not turn black like I have told it to (and as it otherwise does when I highlight a document).

The result is that the results from an embedded query have opaque yellow highlighting (as I amended), but the text hasnt changed to be black.

How can I make the text turn black anywhere in my obsidian vault that is highlighted?

Edit 2:

Ok I can clarify even further:

  • For dark theme, the text when highlighted is black
  • For dark theme, the text highlighted as part of a query is white (PROBLEM)
  • For light theme, the text when highlighted is black
  • For light theme, the text highlighted as part of a query is black

How can I ensure that no matter what text is highlighted in however manner (manually or as part of a query), the text stays black regardless if the light or dark theme is used?

Got it. It seems the issue shows up in the matched text of Search, Backlinks, etc., in dark mode. I don’t know the the exact yellow you are using, so just went with yellow :yellow_circle: and black :black_circle:, but you get the idea.

body {
    --text-highlight-bg: yellow;
}

.theme-dark .cm-s-obsidian span.cm-highlight, .markdown-rendered mark {
    color: black;
}

.theme-dark .search-result-file-matched-text {
    color: black;
}

1 Like

This works perfectly, thank you so much!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.