Change the color of a couple of elements in the sidebar

[Ma-t]

I wanted to create a simple css snippet to change the background color of the selected note, and the down arrow of a opened folder. This would help me better visualize where is the note and the parent folders. I found what are probably the names of the elements I’d want to change, but me being a css newbie I got stuck. Can anyone help me?

I want to get from here

To here.
Here the “arrow down” is the main color of the vault, and the other whatever color (I would change it later manually)

The classes that should manage these elements are:
“tree-item-icon collapse-icon” - for the arrow
“tree-item-self nav-file-title tappable is-clickable is-active” - for the selected file

[dawni]

This is working in the default theme:

body {
	--nav-item-background-active: var(--interactive-accent);
	--nav-item-color-active: var(--text-on-accent);
}

.tree-item:has(.is-active) > .tree-item-self .tree-item-icon > svg {
	color: var(--text-accent);
}

It colors all the collapse-icons along the path to the active note as long as the immediate folder is expanded. When you collapse that folder, the arrow color goes back to normal because the needed info—about which note is active—is no longer available in the file navigation container.

To color the icon for only the immediate folder, change the second part to:

.tree-item:has(> .tree-item-children > .nav-file > .is-active) > .tree-item-self .tree-item-icon > svg {
	color: var(--text-accent);
}

[Ma-t]

This works flawlessly, thank you very much!
And thank you also for the explanation, I followed the logic and I got how it works - might come in handy for other small tweaks : )

[Ma-t]

In the end I edited like this:

body {
	--nav-item-background-active: var(--background-modifier-active-hover);
}

.tree-item:has(.is-active) > .tree-item-self .tree-item-icon > svg {
	color: var(--text-accent);
}

Testing it I found out that I liked a lighter color for the background of the selected file, like the background of the selected button above.