Iterative Rainbow Folder Colors css

Iterative Rainbow Folder Colors css

I’m coming into Obsidian from onenote and one thing I missed from that app was the intuitive color coding of tabs, which made it easy to visually differentiate folders. And I just really like the aesthetics.

So, with a lot of help from @SIRvb, and inspired by the Adding Color to Obsidian forum thread, we’ve come up with the following (left to right).

The attached css files iteratively color folders in a 9 color repeating rainbow pattern up to three levels deep. They work as follows:

  • Iterative Rainbow Folder Icons.css creates a colored icon next to the folders (this is most like onenote and my preferred style).

  • Iterative Rainbow Folder Titles.css colors the folder title itself.

  • Iterative Rainbow Folder Backgrounds.css colors the folder title background.

Iterative Rainbow Folder Icons.css (7.7 KB)

Iterative Rainbow Folder Titles.css (11.5 KB)

Iterative Rainbow Folder Backgrounds.css (7.3 KB)


Thanks for sharing. Really useful.

Is there a way to target (colourize) top-level folders only? I have tried to edit the CSS but without success.




If you’re doing it by path you can choose just the top folder of a given section. These files are just doing it in a sweeping definition that affects all folders/files. You need to define the exact folder you want to affect.

@pbhopeful Hello, I’m using the Folder Backgrounds.css and it’s making it where I can’t see the text of files within folders unless I hover over it like so:
Also, the arrows on the left are always pointed downwards whether the folder is open or not, is there a way I can change their direction based on whether they’re open or not?