Snippet for file explorer background colors (using file-color plugin)

[Thomas_Schmall]

Hey. I’ve made a snippet that changes the background of files and folders in explorer pane. I thought this might be nice for others also.

I was using the file-color plugin, which allows you to change the color of the name, but not really the background. Hopefully they’ll add it as option in the future. You’ll need the plugin activated and define some colors, obviously.

Here’s the code for snippets:

.workspace-leaf-content[data-type="file-explorer"] .nav-files-container .nav-folder-title.file-color-file,
.workspace-leaf-content[data-type="file-explorer"] .nav-files-container .nav-file-title.file-color-file 
{
    background-color: var(--file-color-color);
    color: var(--file-color);
}

Here is a screenshot in the default theme:

And here with a theme that otherwise adds random colors (PLN). Works well together I find.

It would be most awesome if one could change the transparency of these. And also make the indented/child folders more clear. But my CSS knowledge wasn’t good enough to manage.

[Jopp]

@Thomas_Schmall

Here is a screenshot in the default theme:

Oh, newer builds of Obsidian ship as well icons for the folder tree ?

[Thomas_Schmall]

Oh, that’s another plugin I use (Icons-Folder). Maybe I should’ve deactivated it for clarity. Anyways, I find it helps also for quick visual finding of folders/files.

[danielo515]

@Thomas_Schmall

background-color: var(--file-color-color);
    color: var(--file-color);

Where are thise variables coming from?

[Thomas_Schmall]

@danielo515

Where are thise variables coming from?

--file-color-color comes from the file-color plugin. I’m just switching it to the background.
--file-color works to reset the text color. But it might work by accident?! Maybe color: var(--text-normal); would be better there.

[Thomas_Schmall]

An update on this: With some help I managed to add different rules for folders and files (still needs the file-color plugin).

• Top folders have the background (with a slight transparency).
• Sub-folders are now bordered in the selected color and have the text in color. Plus a smidgeon of background.
• Files are just text-colored.

Makes it easy to navigate, I find.

Screenshot with the default theme:

And here with the PLN theme:

Here’s the snippet code I used.

.workspace-leaf-content[data-type="file-explorer"] .nav-files-container .mod-root > .nav-folder-children > .nav-folder > .nav-folder-title {
background-color: var(--file-color-color); 
color: var(--text-normal);
opacity: 0.85;
}

.workspace-leaf-content[data-type="file-explorer"] .nav-files-container :not(.mod-root) > .nav-folder-children > .nav-folder > :not(.nav-file-title).nav-folder-title {
background-color: rgba(80, 170, 255, 0.03);
border-style: dotted;
border-width: 1px;
border-color: var(--file-color-color); 
}

[danielo515]

Looks awesome

[tim_crouse]

Is it possible to change font color (in the explorer) based on the file extension?

For example could all *.pdf files have their file name font color set to RED?