Newbie question around cursor colors and file nav selections with a custom obsidian.css

[ILikeVoltron]

Hello friends!

I have what I hope is a simple question!

When using the “Files: Show File Explorer” my obsidian directory is shown with it’s custom colors, I defined those in snippets/obsidian.css with something like the following:

.nav-folder-title[data-path*="DirectoryName"], .nav-file-title[data-path*="DirectoryName"] { color: ...; background: ...; }

My challenge is that when combined with a theme like flexoki or minimal, the outline color for the selection is difficult or impossible to discern (attached screenshots show this). I tried playing around with the box-shadow options in obsidian.css, but I lack the full understanding of how to get what I’m looking for.

Things I’ve tried:

.nav-files-container .nav-folder {
        box-shadow: 0 0 0 2px rgb(15, 15, 15);
}

Which does alter the non-selected boxes to the right color but it doesn’t follow the focus of the cursor.

Thank you for taking the time to read and understand my problem, I hope we can find a solution.

[ILikeVoltron]

Just wanted to update the thread, apparently using vim mode causes some other cursor issues, as it affects using block or line depending on vim mode, this is all fine and good but doesn’t help me figure out further why the color of the cursor in the file panel is different from the cursor in the editor panel.

I also tried changing the accent color as found in settings → appearance, but this only changed all the OTHER cursors, plus the background on checkboxes and the like.

Then I followed these instructions and still can’t seem to change the cursor in the file browser:

Caret/Cursor thickness

If that works for you, go with it. There’s also a variable, --caret-color, so you could easily do .theme-light { --caret-color: salmon; } .theme-dark { --caret-color: gold; } to set separate colors depending on if you’re in the light or dark color scheme.

This affects both the light and dark theme cursor, but only in the editor window and not the file browser

[ariehen]

The “caret-color” is referring to the | (pipe) in an editor window when you are typing. It doesn’t have to do with moving your mouse pointer around or hovering.

---

For your initial question, I think you are looking for a .has-focus state or hovering over something with the mouse pointer.

When running the Files: reveal current file in navigation command and using arrow keys to up/down, this is applied:

example snippet:

.theme-light {
    --background-modifier-border-focus: olive;
}

---

For hovering with your mouse pointer, there’s a variable (things starting with --) as well:

.theme-light {
    --nav-item-background-hover: rgba(255, 105, 180, 0.8);
}

This is what is applied for the current note you are looking at:

---

Have a look here: https://docs.obsidian.md/Reference/CSS+variables/Components/Navigation for the variables covering navigation. This is essential as well if you haven’t see it yet:

Obsidian CSS Inspector Workflow

Obsidian CSS Inspector Workflow This was originally called “Obsidian CSS Quick Guide” but it ended up being more focused on the inspector. As a retrospective change to help people use this as a resource, it has been renamed. – FireIsGood Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. …