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

[TariqMK]

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!

[holroy]

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.

[TariqMK]

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?

[holroy]

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

Css for ==highlight==

This? /* Highlight EDITOR */ .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight { background-color: transparent; color: #DA70D6; } /* Highlight PREVIEW */ .markdown-preview-view mark { background-color: transparent; color: #CD0000; } Angel

Or possibly this slightly newer answer:

Change the color of highlight using double equal sign

Depending on what theme you use, there might be a setting for it in Style Settings. Best to change it there so it doesn’t look funky with light/dark themes. If not, this snippet works: color is the text color (commented out here) and background-color is the highlight color. .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight { /*color: purple;*/ background-color: pink; } .markdown-preview-view mark { /*color: purple;*/ background-color: pink; }

[ariehen]

Those still look good holroy

/* ==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.

[TariqMK]

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?

[ariehen]

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):

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?

[TariqMK]

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?

[ariehen]

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 and black , 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;
}

[TariqMK]

This works perfectly, thank you so much!