Minimalist colored folders

Hi all,

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.

Title only

Title + contents

The CSS snippets are available on Github here.

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).

Enjoy and feel free to propose some changes!

13 Likes

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. I like it. :+1:

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

Had same issue
Fixed by removing from css what comes after Other Settings - selectors that change margins and paddings etc.

1 Like

Edit: I managed. Did not know that CSS is something different. Thank you for this cool theme!