How can I change the highlight color via CSS for elements other than markdown text?

[tamari]

Specifically, I want to change the yellow highlight on linked mention file names, the highlight that appears when clicking a folder name in Explorer, and all other instances of the yellow highlighter. I checked the selectors using the Elements panel but couldn’t figure it out.

[dawni]

You can use these variables for the file explorer and for linked mentions:

/* file explorer */

.theme-light {
	--nav-item-background-active: purple;
}

.theme-dark {
	--nav-item-background-active: orange;
}


/* highlihts in "Linked mentions" at the bottom of notes and in the Backlinks pane */

.theme-light .backlink-pane {
	--text-highlight-bg: pink;
}

.theme-dark .backlink-pane {
	--text-highlight-bg: green;
}

Set the colors you want for your light and dark themes. You’ll probably want to use transparency, for example, --text-highlight-bg: rgba(255, 208, 0, 0.4);

I don’t know what “other instances” you meant, but you were in the right place by looking in the elements panel. Hopefully the ones above can give you an idea of how to identify any others.

Alternatively, you might find some of these kinds of variables in the documentation: CSS variables - Developer Documentation . But I think the more effective way is using the Developer Tools like you started to do.

[tamari]

I was able to successfully change the colors for the Explorer and linked mentions. I want to change the yellow highlight color shown in these screenshots. I found that I can change these colors by editing the color code for .text-highlight-bg-rgb in the developer tools, but I don’t know how to reproduce this using CSS.

[dawni]

Here is how to change the highlighting in the search results:

.search-result-file-match {
	--text-highlight-bg: rgba(0, 255, 0, 0.3);
}

[tamari]

I was able to identify the selector using this link as a reference.

Getting comfortable with Obsidian CSS

While using Obsidian, if you press CTRL-SHIFT-I (option-cmd-i for mac) then it will bring up the developer window. In the developer window, at the top left is an icon with a pointer in a box. This allows you to select elements on the screen and see how to refer to them and what styles. I will occasionally update this post with more pictures of how to do stuff. [Developer Tool] You can hover over items to see what they do and then click on an item to select it. Then go down to the styles secti…

.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: rgba(146, 214, 230, 0.3);
  }


.cm-s-obsidian span.cm-formatting-highlight,
.cm-s-obsidian span.cm-highlight {
 	background: rgba(146, 214, 230, 0.3);
}

.tree-item-self.nav-folder-title.has-focus,
.is-flashing {
	--text-highlight-bg: rgba(146, 214, 230, 0.3);
}