How to style text selection with custom CSS?

Help
#1

In normal HTML, you can change the style of selected text using the ::selected css selector. I tried doing the same thing in my custom CSS file in Obsidian, but my changes don’t appear to affect the way selected text shows up.

How can I change the style of selected text in Obsidian? I’d like to make the selection background color a bit brighter so it stands out more.

Thanks!

#2

I can only offer vague advice, since I’m not at my desk at the moment, but: you can use the devtools (cmd/ctrl+shift+i by default, I think) to inspect the underlying HTML. If you open that up, select some text, and then find the selected text in the DOM, you can find exactly what to target.

Obsidian is built on CodeMirror, which probably does its own thing for modeling text selection.

#3

@topherhunt - The base theme (and most of the community themes) control this through the --text-selection variable. Try changing that. It’ll depend on whether you use a light or dark theme. Add this to your css file (or snippet):

.theme-dark {
    --text-selection: ##00ff00;
}

Change the green color #00ff00 to a color of your choice.
Change to .theme-light if using a light based theme.

Hope that helps!

2 Likes