Iterative Rainbow Folder Colors css

Hey guys i just customized my version of the Rainbow Folder Titles and asked sailKite on discord to make a snippet so that it also applies to the bookmarked section.

Mine has more colors (14) and i tweaked them for dark mode
CUSTOMISED Iterative Rainbow Folder Titles .css (16.2 KB)

Bookmark iterative Rainbow Folder Titles.css (1.8 KB)

1 Like

I’m using the titles snippet and when I hover over parent folders the text turns black, when I hover over child folders, the color remains. Does anyone know how I can make the color remain when I hover over the parent folders as well?

You can see here, that Paths is black when I hover over it while AI Prompts stays red.

folder1 folder2

Have been using a slighty tweaked version of the Iterative Rainbow Folder Titles.css. All looks great – with the little snag that I can’t seem to figure out: The top-level folders are set to 13px but the folders nested below seem take the default text size of 15px. – and look way too big. (So do their folders below.) I’ve tried adding “font-text-size: 13px;” to the .nav.folder-children section and created a specific .nav.folder-children entry with font set to 13px – no luck.
If I open the DevTools section in Obsidian and override the repective setting manually, I can easily make it to look exactly as wished for. Any ideas what I could add to the css to fix the size of the subfolders – and make this permanent? Thanks !

I removed this entire section (it’s at the very top of the file) to make all of the titles the same size.

/* Top Level Folder Titles /
font-size: 18px;
padding-left: 20px;
margin-top: 5px; /
space between top level sections */

1 Like

@angiebowen: Thanks for this. Have, inspired by your suggestion, added another little snippet and succeeded in making my folders and subfolders even:

/* Make Top Level Folder and subfolders even */
.nav-file-title, .nav-folder-title {
font-size: 13px;
font-family: Avenir Next;
All is well now!

1 Like

If you want to use your current theme AND the aforementioned CSS snipped; Shortest path to non-darkening folders is putting the following at the very end of your CSS snipped

@media (hover: hover) {
body:not(.is-grabbing) {
color: var(–Fold1);
background-color: var(–Fold1); */


Looking into it – By product of (usually) Dark Themes.
Exact location below


Hi! Has anyone figured out how to make it so that the subfolder colors are indented? I have tried playing with various ‘margin-left’ and ‘inline’ parameters in the css but nothing seems to affect the leftmost boundary except for ‘.nav-files-container’ magins - but that does everything.

I am not overly familiar with CSS and can’t proceed. ChatGPT has also failed me in playing with the code.

Anyone figure this out? It would be great to have subfolder color-backgrounds indented so that there is visual feedback as to what is top-level and what isn’t.

1 Like

Work with the information you have: you know the color is turning black so you can search for the rgb or hex value that corresponds to dark colors.

Hexadecimal order is like that: 0123456789ABCDEF, 0 is the first number F the last
000000= Black
ffffff= white
So youre searching for a number that mostly uses the values 0123 at the beginning.
This could look like that: 030303 or 101010 or 2e2e2e.

RGB uses numbers up to 255
0,0,0= black
255,255,255= white
So youre using for numbers that mostly use values that are 1 or 2 symbols long.

Now you have to search in the snippet itself and change this. The good thing of css. snippets is that obsidian is updated as soon as you save the changed snippet. You dont need to close or update the obsidian window neither do you have to close the snippet file to see changes. In your case you only have to hoover over an item.

How can I change that only first level folders are colored? Secondary folders do not need colors.

I guess you have to modify this part

Keywords in my example should be:

  • nth
  • child
  • 6n+

n refers to an arbitrary number

Basically you have to delete the intendation piece by piece and see what works. You may can expect it to only start working when the intendation levels are all the same because some depend on eachoter to work.

In my example its 6n+ because i have 6 Levels till the Colors repeat, same as my headings

My current version looks like this


  • Only 6 Levels of Color like Headings from Minimal Theme
  • Deleted Icon
  • Arrow Disappears off screen when Folder unfolded (didnt manage to change the color instead)
  • Arrows are now indented with text


It prefers Files over Folders because its easier to see which files are located in which folder.

Using Lithous CSS snippet (coloured titles only) with a little tweak of my own; the theme is Minimal. Since 1.6.0 all my topfolders titles have lost their colour. The child folders still work as always. Any ideas what I need to fix to get the colour back to my top folder’s titles?

I don’t use the snippet myself, so didn’t go through the whole thing, but an update seems replacing the


sections with:

.nav-files-container > div > .nav-folder>.nav-folder-title[data-path^="0"]

Screenshot 2024-05-19 at 6.49.26

Also, I noticed the padding-left:0px in the /* Top Level Folder Titles */ section was causing the folders to shift around when clicking on them. Commenting that out might be a good idea depending on how it acts for you.

Hopefully that gets you started.

1 Like

@ariehen Thanks for your pointers. Have started tampering with Lithou’s snippet along what you suggested but so far with no success. Will need more time to figure what’s needed beyond replacing the sections you suggested.

New Version: Folder Titles


  1. Root Folder Background is always colored: Dark Green
  2. Subfolder alters when unfolded
  • Backround Color Added: Dark Blue
  • Font Size: Decreased
  • Font Weight: Increased

Before Unfold________________After Unfold