Home / GitHub Page

Theme request: Subnotebook shading

I read in the forum that the “structural” CSS in Joplin is not exposed, so I don’t believe I can do this in external CSS.

One thing that would be very nice would be to have the option for each child notebook tab to have a background color that is, say, 10% lighter than its parent.

That would make the data structure much more visible than just indentation, which is useful when you’re trying to “scan down” into categories.

Do you have examples of how this is done in other apps?

I’m not sure that it is done in other apps. Here is a mockup of what I’m thinking about, if that would help.

Hopefully you can see what I mean-- as I scan down the list, my brain isn’t simultaneously trying figure out which mental bucket to put what I’m looking at into-- it’s “this color is cities” or “this color is states”.

This example is pretty straightforward, but in my use case the hierarchy is more like stakeholders -> computing platforms used -> processes owned -> process detail -> process history, as well as a couple of bins completely outside the hierarchy for office procedures, local system maintenance, etc.

The level shading should also be something that a user can turn on or off in the config, so it won’t impact people who like the interface just as it is.

I found an example of this online at readthedocs. Here is a screenshot from the godot engine. But it seems all documentation hosted on read the docs has this feature.

That’s a little more dramatic than what I’m envisioning-- still attractive, but the current interface is nice and clean (read: not distracting) and I think that’s a positive.

I created another mockup to show another level and now think that even this is too dramatic a color shift (but I’m too busy to redo it). :slight_smile: The background becomes too light after just a couple of children.

Maybe the implementation is just a percentage in the config, e.g. each child background is x% lighter than the parent (and of course if set to default of 0 then the interface remains just as it is.) People can then tweak to what works for them.


I like the idea, but I found the first mockup nicer.

However, there is one point to consider: If you decrease/increase the background color by x%, the background will be white after 100/x levels. What then?
It’s rather unlikely that someone has 10 or 20 levels, but it is still an edge case. How would you solve this? Or don’t we care that at one point there’s no difference between levels anymore?

I think that’s a moot point. By then, your biggest problem will be the notebooks will be indented too far right, and you won’t be able to keep all the levels in your head anyway.
(At that point, maybe you should’ve used a mind map or something, instead of joplin. :smiley: )

I like the idea of a cutoff level, and it probably should be pretty small so you don’t have to worry about when to change the font color from white to dark.

I also agree with zblesk-- if someone had that many sublevels they’d have to be doing all their navigation by searching terms or tags anyway, so colors wouldn’t be useful there and they would likely just turn the coloring feature off.

I like the first mockup better too. Let me make one more, sampling those exact colors (as I noted I think I made the second one too dramatic in the color shift).

1 Like