How to change the background highlight of an item in the note pop-up list

I’m trying to change the hover background color of the notes in this list. (Like the item in the image with the red circle around it.) I’m unable to find the class with dev tools because as soon as you focus on something else the list will close.

I’d like to do this because the current hover background color in this list is barely distinguishable from the regular background color.

I highly recommend checking out: https://github.com/chrisgrieser/obsidian-theme-design-utilities. It has a “Freeze Obsidian (with 4s delay)” option that comes in handy for situations like this.

Screenshot 2025-01-16 074251


With a quick look, the selector appears to be:

.suggestion-item.is-selected {
    background-color: var(--background-modifier-hover);
}

with --background-modifier-hover being

--background-modifier-hover: rgba(var(--mono-rgb-100), 0.075);

So you could change the --background-modifier-hover, but that’s used all over Obsidian. I’d try something like this to start:

.suggestion-container .suggestion-item.is-selected {
    background-color: rgba(var(--mono-rgb-100), 0.200);
}

which ends up looking like:

Screenshot 2025-01-16 075548


Of course, the theme you are using could be changing the hover/selected color and this may not be specific enough, but the above is working in the default theme.

1 Like

Fantastic! That snippet worked great. Fortunately, I’m just using the standard dark theme.

Thank you!

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