# Iterative Rainbow Folder Colors css **URL:** \ **Category:** Themes & CSS snippets\ **Created:** [July 18, 2021, 2:10am UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066 "2021-07-18T02:10:13Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![pbhopeful](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/p/f04885/32.png) [@pbhopeful](https://forum.obsidian.md/u/pbhopeful)\ **Post date:** [July 18, 2021, 2:10am UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/1 "2021-07-18T02:10:13Z")
# 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](https://forum.obsidian.md/t/adding-color-to-obsidian-a-rainbow-of-possibility/12805) 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](https://forum.obsidian.md/uploads/default/original/3X/4/5/4512d00540ae03282f079c8249a905bef139e72b.jpeg) [Iterative Rainbow Folder Icons.css](https://forum.obsidian.md/uploads/short-url/mO1tskQ4jYPvg0Je4487EQHpmm4.css) (7.7 KB) [Iterative Rainbow Folder Titles.css](https://forum.obsidian.md/uploads/short-url/8NXPKqCLqtxzkFRcuKYtWJyoX4O.css) (11.5 KB) [Iterative Rainbow Folder Backgrounds.css](https://forum.obsidian.md/uploads/short-url/fBK2XOlSGHVnKJNxWO9rnEtaVAi.css) (7.3 KB) ---
**Author:** ![anon12638239](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/2bfe46/32.png) [@anon12638239](https://forum.obsidian.md/u/anon12638239)\ **Post date:** [July 19, 2021, 9:46am UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/2 "2021-07-19T09:46:27Z")
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 ---
**Author:** ![Mae](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/3e96dc/32.png) [@Mae](https://forum.obsidian.md/u/Mae)\ **Post date:** [December 20, 2021, 4:40am UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/3 "2021-12-20T04:40:50Z")
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. ---
**Author:** ![ChopSuey](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/c/d78d45/32.png) [@ChopSuey](https://forum.obsidian.md/u/ChopSuey)\ **Post date:** [April 26, 2022, 7:12pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/4 "2022-04-26T19:12:48Z")
@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](https://forum.obsidian.md/uploads/default/original/3X/3/4/3475759167b96c9482a5fa7ad3347e1320aa781d.png) 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? ---
**Author:** ![morethanx](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/71e660/32.png) [@morethanx](https://forum.obsidian.md/u/morethanx)\ **Post date:** [November 14, 2022, 4:56pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/5 "2022-11-14T16:56:24Z")
hi, did you find a solution to that? I have a similar problem. ![Screenshot 2022-11-14 at 17.54.42](https://forum.obsidian.md/uploads/default/original/3X/d/3/d3cbe5c4d79e4b797109510b0d6663efca6a28c3.png) ---
**Author:** ![RiCkYB\_667](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/a587f6/32.png) [@RiCkYB\_667](https://forum.obsidian.md/u/RiCkYB_667)\ **Post date:** [November 15, 2022, 8:16am UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/6 "2022-11-15T08:16:07Z")
Hey there! If you open the snippet css file, look for the part where the indicator is defined. I had to play around with negative left and top values to make mine fit as well. ```auto .nav-folder-collapse-indicator::after { position: absolute; content : "↓"; left: -15px; top: -2px; font-size: 15px; font-weight: bold; transition: transform 10ms linear 0s; ``` ---
**Author:** ![RiCkYB\_667](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/a587f6/32.png) [@RiCkYB\_667](https://forum.obsidian.md/u/RiCkYB_667)\ **Post date:** [November 15, 2022, 8:28am UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/7 "2022-11-15T08:28:30Z")
And to make it show different arrow on collapse, just add a new section with **.is-collapsed** part: ```auto .is-collapsed .nav-folder-collapse-indicator::after { position: absolute; content : "🠖"; left: -15px; top: -2px; font-size: 15px; font-weight: bold; transition: transform 10ms linear 0s; } ``` ---
**Author:** ![morethanx](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/71e660/32.png) [@morethanx](https://forum.obsidian.md/u/morethanx)\ **Post date:** [November 16, 2022, 11:35am UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/8 "2022-11-16T11:35:17Z")
Wow, that’s amazing! I didn’t expect such a quick response and it worked perfectly well. Thank you! 🙂 Also, I haven’t realised before how much I missed this colour coding and how much it helps me navigate. ---
**Author:** ![RicR](https://forum.obsidian.md/user_avatar/forum.obsidian.md/ricr/32/53309_2.png) [@RicR](https://forum.obsidian.md/u/RicR)\ **Post date:** [November 28, 2022, 5:18pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/9 "2022-11-28T17:18:09Z")
Hi. Hoping a CSS legend might be able to further narrow this concept down. I am writing a dedicated use vault for a leadership program. The initials are LMCLP. I have come up with a folder structure that will suit and naming the folders:- 01 Logs 02 Mixed 03 Cards 04 LEAD 05 Projects The folder first letters spell out the acronym. I would like to bold them and colour them yellow, for example, but can’t get CSS selectors to work at present. I have tried:- .nav-folder-title:nth-of-type(4n) { font-weight: bold; color: yellow } to select the fourth letter but no joy. Cheers, ---
**Author:** ![56phil](https://forum.obsidian.md/user_avatar/forum.obsidian.md/56phil/32/32771_2.png) [@56phil](https://forum.obsidian.md/u/56phil)\ **Post date:** [January 20, 2023, 5:58pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/10 "2023-01-20T17:58:46Z")
Hi. I could use some help adding this feature to my Obsidian. I’ve downloaded the three CSS files, and moved them to the vault’s root. I observed no change. What am I missing? Thanks. ---
**Author:** ![willasm](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/w/d26b3c/32.png) [@willasm](https://forum.obsidian.md/u/willasm)\ **Post date:** [January 20, 2023, 9:07pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/11 "2023-01-20T21:07:11Z")
You need to add them to the snippets folder, eg. ‘VaultName/.obsidian/snippets’. Create the snippets folder if it does not exist yet. Then under settings/appearance at the bottom make sure the snippet is enabled. You will only need to enable one of them so choose which one you prefer. ---
**Author:** ![56phil](https://forum.obsidian.md/user_avatar/forum.obsidian.md/56phil/32/32771_2.png) [@56phil](https://forum.obsidian.md/u/56phil)\ **Post date:** [January 21, 2023, 7:11pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/12 "2023-01-21T19:11:11Z")
That was just what I needed. Thank you. ---
**Author:** ![AdriJ](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/b487fb/32.png) [@AdriJ](https://forum.obsidian.md/u/AdriJ)\ **Post date:** [February 6, 2023, 10:25pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/14 "2023-02-06T22:25:49Z")
Is there a way to change the nested folders to have black text instead of white? I tried looking through the CSS, but don’t understand it enough. Thank you. ![image](https://forum.obsidian.md/uploads/default/original/3X/6/6/664db5a82138edff0508f554227bfba60d06a842.png) ---
**Author:** ![AdriJ](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/b487fb/32.png) [@AdriJ](https://forum.obsidian.md/u/AdriJ)\ **Post date:** [February 6, 2023, 11:54pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/15 "2023-02-06T23:54:52Z")
All set, was able to figure it out! ---
**Author:** ![Penelopix](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/p/ee59a6/32.png) [@Penelopix](https://forum.obsidian.md/u/Penelopix)\ **Post date:** [May 9, 2023, 3:16am UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/16 "2023-05-09T03:16:58Z")
![Screenshot 2023-05-08 221444](https://forum.obsidian.md/uploads/default/original/3X/b/d/bd4f120a27eb7f1c593b9fee3727588bae05eadc.png) Hey, there, brand new user here. I fixed my folder arrows to not be in the titles, but the nested folders are still messed up. Please help ---
**Author:** ![TheTao](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/t/cab0a1/32.png) [@TheTao](https://forum.obsidian.md/u/TheTao)\ **Post date:** [May 15, 2023, 8:25pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/17 "2023-05-15T20:25:50Z")
With insider release 1.3.1, this appears to be broken. ---
**Author:** ![morethanx](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/71e660/32.png) [@morethanx](https://forum.obsidian.md/u/morethanx)\ **Post date:** [June 22, 2023, 9:52am UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/18 "2023-06-22T09:52:41Z")
Same for me. Was anyone able to repair? =) ---
**Author:** ![webinspect](https://forum.obsidian.md/user_avatar/forum.obsidian.md/webinspect/32/30617_2.png) [@webinspect](https://forum.obsidian.md/u/webinspect)\ **Post date:** [June 26, 2023, 7:32pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/19 "2023-06-26T19:32:28Z")
I was able to fix the folder backgrounds snippet. I also made a couple of adjustments: these folders now use spacing and colors from the theme instead of stock colors, so it should match whatever theme you are using (examples below all use the Minimal theme with different color schemes): ![Screen Shot 2023-06-26 at 2.26.30 PM](https://forum.obsidian.md/uploads/default/original/3X/a/e/ae188d70756e974d2a34dfb5aaf35bfcaab17f8a.png) ![Screen Shot 2023-06-26 at 2.26.45 PM](https://forum.obsidian.md/uploads/default/original/3X/4/3/43df86be4c71fe1eea0bac65b465da4c2ae53484.png) ![Screen Shot 2023-06-26 at 2.26.58 PM](https://forum.obsidian.md/uploads/default/original/3X/3/a/3af6d2a5789da59e148e9028d66aed809a7dc1a5.png) [Iterative Rainbow Folder Backgrounds.css](https://forum.obsidian.md/uploads/short-url/ygofZrBpeLfGVyUAQRtrMBHfXyp.css) (6.0 KB) ---
**Author:** ![ElPIp](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/e/3bc359/32.png) [@ElPIp](https://forum.obsidian.md/u/ElPIp)\ **Post date:** [July 16, 2023, 2:24pm UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/20 "2023-07-16T14:24:55Z")
Has anyone managed to get the indents to work properly in the latest version? In the current version the backgrounds are all at the same point so you can’t visually tell which is a folder and which is a sub-folder. ---
**Author:** ![LordPiki](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/l/7993a0/32.png) [@LordPiki](https://forum.obsidian.md/u/LordPiki)\ **Post date:** [October 15, 2023, 1:38am UTC](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066/21 "2023-10-15T01:38:37Z")
Hey, I have a problem where if i turn on the Iterative Rainbow Folder Icons and Iterative Rainbow Folder titles it’s broken and shows weird things. can anyone help? ![image](https://forum.obsidian.md/uploads/default/original/3X/7/d/7dde3f111ef0f7d1ec8f1773280409cf2fc989f1.png) [Next page](https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066.md?page=2)