Can anyone help me make a CSS Snippet that will allow me to do with this folders in Obsidian?

[harrison5]

Anyone know how to write in CSS and want to help me make this awesome looking folder design in Obsidian? I think it looks really clean!

Thanks for your help!

[harrison5]

Kapirklaa on the Obsidian Discord was able to help me out. Here is the code if anyone wants it! Feel free to tweak the colors and if you want to add more colors (not just 4) don’t forget to update “4n” to be “6n” or however many folder colors you decide to use.

body {
   --folder-color-1: red;
   --folder-color-2: pink;
   --folder-color-3: purple;
   --folder-color-4: blue;
}

.nav-files-container > div > .nav-folder:nth-child(4n + 1) { --folder-color: var(--folder-color-1); }
.nav-files-container > div > .nav-folder:nth-child(4n + 2) { --folder-color: var(--folder-color-2); }
.nav-files-container > div > .nav-folder:nth-child(4n + 3) { --folder-color: var(--folder-color-3); }
.nav-files-container > div > .nav-folder:nth-child(4n + 4) { --folder-color: var(--folder-color-4); }

.nav-files-container > div > .nav-folder {
   border: 1px solid var(--divider-color);
   border-left: 4px solid var(--folder-color);
   border-radius: var(--radius-s);
}

.nav-files-container > div > .nav-folder + .nav-folder {
   margin-top: var(--size-2-2);
}

.nav-folder-title {
   color: var(--folder-color);
   font-weight: var(--font-bold);
}