How to Change Text Color of all Subfolders releative to Top Level Folder

Custom CSS & Theme Design
1

Hi there!

What I’m trying to do

I am trying to change the color of all sub folders relative to its top folder.

Things I have tried

.nav-folder-title[data-path^="Journal"] {
	background-color: rgba(var(--folderColourJournal), var(--folderBgOpacity));
	color: var(--background-primary);
}

	.nav-folder-title[data-path^="Journal/Daily"] {
		background-color: rgba(var(--folderColourJournal), var(--folderBgOpacitySub));
		color: var(--background-primary);
	}

The above example works when I specify an exact path for a given subfolder. But as soon as I add I new folder I would need to add / change the code accordingly.

  1. Is there a more dynamic way of realizing this? Like with some wildcard expressions in paths, like “Journal/*”
  2. If a wildcard expression is possible, is there a way to limit these to a certain folder level, e.g. only 2nd level but not 3rd?

Thank you so much <3

2

Is what you want is rainbow folder? If so, here is my snippet in another answer. How can I fix and customize my css snippet that changes the color of folders? - #3 by yen_le

1 Like
3

Thank you for your input!
But not quite. I want to specifically target the properties of a subfolder, so that I can assign it like a different color than its upper level folder. I also do not see a way in the rainbow folder snipper for that. Am I missing something?

4

CSS only supports selection wild card, unfortunately, no regex for the string. I look through the community plugin and I see this File Color plugin that might do the trick.

image
image582×1868 61.9 KB

5

If I understand what you’re trying to do, this framework might help.

To begin with, some basics to make sure we’re on the same page…

Target a folder title at any level by looking at the end the path with $=:

.nav-folder-title[data-path$="folder name"] {
	color: orange;
}

Target a folder title and all of its subfolder titles with *=:

.nav-folder-title[data-path*="folder name"] {
	color: orange;
}

Target a folder container, including it’s title, icon, subfolders, and files:

.nav-files-container div[data-path*="folder name"] {
	color: orange;
}

Highlight a folder called “Daily” no matter how many levels deep it is within the “Journal” folder:

.nav-folder:has(> div[data-path="Journal"]) .nav-folder-title[data-path$="Daily"] {
	background-color: yellow;
}

So for example, here is a combination of selectively coloring your top-level folders by their name and then “rainbowing” their subfolders down to a chosen number of levels. And at any level, you could also assign a color to a specified folder name, if that’s how you want to do it.

/* set your color variables */
body {
   --folder-color-archive: var(--text-faint);
   --folder-color-journal: var(--color-green);
   --folder-color-knowledge: var(--color-blue);
   --folder-color-life: var(--color-pink);
   --folder-color-projects: var(--color-cyan);
   
   --folder-color-1: var(--color-orange);
   --folder-color-2: var(--color-yellow);
   --folder-color-3: var(--color-red);
   --folder-color-4: var(--color-purple);
}


/* set your top-level folder colors by folder name */
.nav-files-container > div {
	> .nav-folder:has(> div[data-path="Journal"]) > .nav-folder-title {color: var(--folder-color-journal)}
	> .nav-folder:has(> div[data-path="Archive"]) > .nav-folder-title {color: var(--folder-color-archive);}
	> .nav-folder:has(> div[data-path="Knowledge"]) > .nav-folder-title {color: var(--folder-color-knowledge);}
	> .nav-folder:has(> div[data-path="Life"]) > .nav-folder-title {color: var(--folder-color-life);}
	> .nav-folder:has(> div[data-path="Projects"]) > .nav-folder-title {color: var(--folder-color-projects);}
}

/* set your first level of subfolder colors by iteration */
.nav-files-container > div > div.nav-folder:not(.is-collapsed) > div.nav-folder-children {
	> .nav-folder:nth-child(4n + 2) > .nav-folder-title { color: var(--folder-color-1); }
	> .nav-folder:nth-child(4n + 3) > .nav-folder-title { color: var(--folder-color-2); }
	> .nav-folder:nth-child(4n + 4) > .nav-folder-title { color: var(--folder-color-3); }
	> .nav-folder:nth-child(4n + 1) > .nav-folder-title { color: var(--folder-color-4); }
}

/* set you second level of subfolder colors by iteration */
.nav-files-container > div > div.nav-folder:not(.is-collapsed) > div.nav-folder-children > div.nav-folder:not(.is-collapsed) > div.nav-folder-children {
	> .nav-folder:nth-child(4n + 2) > .nav-folder-title { color: var(--folder-color-4); }
	> .nav-folder:nth-child(4n + 3) > .nav-folder-title { color: var(--folder-color-1); }
	> .nav-folder:nth-child(4n + 4) > .nav-folder-title { color: var(--folder-color-2); }
	> .nav-folder:nth-child(4n + 1) > .nav-folder-title { color: var(--folder-color-3); }
}

/* set you third level of subfolder colors by iteration */
.nav-files-container > div > div.nav-folder:not(.is-collapsed) > div.nav-folder-children > div.nav-folder:not(.is-collapsed) > div.nav-folder-children > div.nav-folder:not(.is-collapsed) > div.nav-folder-children {
	> .nav-folder:nth-child(4n + 2) > .nav-folder-title { color: var(--folder-color-3); }
	> .nav-folder:nth-child(4n + 3) > .nav-folder-title { color: var(--folder-color-4); }
	> .nav-folder:nth-child(4n + 4) > .nav-folder-title { color: var(--folder-color-1); }
	> .nav-folder:nth-child(4n + 1) > .nav-folder-title { color: var(--folder-color-2); }
}

/* you can keep going to extend to as many levels of subfolders as you'd like; or you can remove the `>` before `.nav-folder-title` to apply your colors to all/infinite subfolder levels */

/* highlight the folder called "Daily" no matter how many levels deep it is within the "Journal" folder */
.nav-folder:has(> div[data-path="Journal"]) .nav-folder-title[data-path$="Daily"] {
	background-color: yellow;
	color: var(--background-primary);
}

The result:

screenshot
screenshot851×1039 28.8 KB