How to : Change search highlight colour?

[samosa]

How can I change the highlight colour when doing a search

Greetings everyone. I am currently using the default Obsidian theme (dark). Whenever I do a search, or click on a link to header, the returned result is highlighted with a dark yellow colour that I find visually unpleazing. (See screenshot)

I have searched these forums and google more broadly. I have found some css snippets that change “.cm-s-obsidian span.obsidian-search-match-highlight” but none have had nay effect whatsoever.

Here is one I’ve tried :

Are these CSS snippets correct?

I agree with you that both changes should be added to the default theme. Nevertheless I’ll give you the minimal css snippet needed for each one (I will apply them on my vault too): 1. Change the color of links in highlighted (==) text .cm-highlight.cm-link, .cm-highlight.cm-hmd-internal-link { color: rgba(21, 146, 255, 1); } When you need to apply a css rule to an element with 2 classes you write .class1.class2. In this case, we need to select links inside a highlight, and internal links …

Is there a way to change the yellow colour that is use in highlighted search results? Thanks!

[Olondre]

This is the one that I use:

  .backlink-pane .search-result-file-matched-text,
  .workspace-leaf-content[data-type="search"] .search-result-file-matched-text,
  .internal-query .search-result-file-matched-text {
    background: none;
    color: var(--text-accent);
  }

It removes the background and gives the text your accent colour, which is what I prefer.
The snippet is for the global search, inline search queries & the backlinks pane, if you only want this to apply to the global search then just remove the other two selectors:

  .workspace-leaf-content[data-type="search"] .search-result-file-matched-text {
    background: none;
    color: var(--text-accent);
  }

I hope this helps.

[blue_emperor]

.theme-dark .search-result-container {
  --text-highlight-bg: var(--color-accent);
}

.theme-light .search-result-container {
  --text-highlight-bg: var(--color-accent);
}

Text-highlight variable is used for highlights in editor as well. Editor can be targeted by replacing .search-result-container with .markdown-source-view. Reading mode can be targeted with .markdown-reading-view.

Some predefined colors are available and they are listed in Colors - Developer Documentation

[samosa]

Wow, finally a snippet that works for chaning the search result highlights! Thank you so much!

[blue_emperor]

You can also try this:

.theme-dark .search-result-container {
  --text-highlight-bg: var(--text-selection);
}

.theme-light .search-result-container {
  --text-highlight-bg: var(--text-selection);
}

See also CSS‑editor community plugin.