Iterative Rainbow Folder Colors css

Share & showcase
#1

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 folders
Iterative rainbow folders769×957 134 KB

Iterative Rainbow Folder Icons.css (7.7 KB)

Iterative Rainbow Folder Titles.css (11.5 KB)

Iterative Rainbow Folder Backgrounds.css (7.3 KB)

22 Likes
Adding Color to Obsidian--- A Rainbow of Possibility!
#2

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.

Thanks

Angel

2 Likes
#3

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.

#4

@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:
image
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?