I’ve been looking for a way to add color to my folders. I tried the snippets created by Lithou and pbhopeful but I wanted something more minimalist.
So I made some changes and created two versions.
The first version “title only” will add a background to the title of top-level folders only. The second version will add a background to top-level folder and all of their contents. Colors and opacity can be modified at the top of the CSS file. The snippets don’t make any change to typography. Only colors and margin/padding of folders. Screenshots below are with the Things theme.
The “title only” snippet is pretty clean. The second one (title+contents) needs a bit of polishing: for instance, while hovering top-level folders, the background doesn’t overlap perfectly. I won’t spend additional time on it though, as I’m using the “title only” spinnet. Also, I’ve tested those in light mode only (I’m not a fan of dark mode).
Thank you for sharing this! I’m a complete noob at all of this and was making slow progress trying to customise pbhopeful’s snippet when I found this - much much better.
I’m using the title+contents snippet on dark mode (Things theme) and am pretty happy with it - I just changed the colours to suit me better. I’m not sure what you meant by the hovering when hovering, but I’m happy with it anyway.
The only thing I would change further is the ability to change the individual colours of the subfolders, something halfway between yours and pbhopeful’s rendition, but I guess I will need to learn more about CSS to attempt it.
Thank you very much! The snippet works fine, except for one issue: When opening folders or editing notes, the folder or the note somewhat moves in the navigation.
You can see in the screenshot, that all the folders are closed. But because I had previously opened “Privat”, it is somewhat to the left. Any idea how to fix this?
Hi everyone,
Thank you for this snippet that I love !
I have a problem though : I don’t understand why the css snippet works on my synced vault on android, but not on the PC side…? Where should I look ?
On PC : the css file is there (in the snippet folder), in the settings, it is “ON” and reloaded.
I closed and relaunch the app on PC.
hm…
For the “First level folder bg (Title only).css” snippet, replacing all the .nav-folder.mod-root > .nav-folder-children parts with .nav-files-container > div > should do it. e.g.
.nav-files-container > div > .nav-folder:nth-child(9n+2) > .nav-folder-title { ... }
Some of the colored folder options included with themes might be a bit tricky digging out the correct sections to update and make into a snippet, but the stand-alone folder snippets should mostly follow the above pattern.
Thank you for this! I made a custom CSS to color my folders and subfolders and it suddenly stopped working a few months ago. It was pretty hard to find the solution, but glad I found your post!
Is there a resource with more information on this css element naming change that you could point me to for future reference? Thanks!
