Joplin Theme : Clear UI

A new clean a minimal Theme for Joplin 1.7+.
This design is inspired by the Nextcloud Tasks app design. It is clear, minimal, and a bit more spacious.

The theme is for the App only, the WYSIWYG Editor is untouched. It is built on top of the Light theme, so be sure to select the Light theme before editing the Joplin-wide app style.

The theme can be downloaded here : Clear UI Theme

13 Likes

Yep. That's a nice visual improvement. Readability definitely better. Thanks.

Thank you! A clear improvement over the defaults. And I tweaked to have Quicksilver as font. :wink:

@marcteys
hi there, don't know what I am missing, but when I look at my plain vanilla Joplin (osx) it looks exactly like the screenshot you provided on top. The only difference I see is the background color behind the list of notebooks. Would you mind telling us what one is supposed to see OR what exactly you changed - item by item ?

Are you using the Light theme as default and Joplin 1.7.11 ? If you can it would be nice to see a screenshot in order to fix this issue

Very nice theme, clear and easy to read.

I have it running on OSX Catalina 10.15.7 (19H2) with Joplin 1.7.11 (Prod), so it does work on Mac

Not a big fan of the design of the Nextcloud Tasks app but this Joplin theme is just gorgeous. I also dig the new default light theme but I think this one is an improvement.

I think there might be a small bug concerning the tag styling. When disabling "show note counts" from the View menu the tag styling is lost and only the text remains.

Thanks for your comments and for reporting the "not count" issue, I fixed it and you can now download the last version on Github.

Hi Marc, really like how the tags show now, which saves a lot of scrolling action and starts to look more like the Evernote tag manager page.

I did notice that the active tag is not highlighted and could not figure out how to make it do that.

That would be a nice improvement! Any way you know how to make it show an active tag more clearly?

That way, you can CTRL-P and # search for a tag, and see which one is is a while later / at all time?

Much thanks!

1 Like

Feature added ! Thanks for the suggestion

Very nice theme, thank you!
One thing I noticed: when selecting multiple notes on desktop (using Shift + mouse click) only one note is highlighted; the others have the same color of unselected notes, so it's impossibile to distinguish them.. not sure if it can be easily fixed or not :slight_smile:

Now fixed

Wow, that was quick! It looks terrific!!

For anyone playing with the userchrome.css option, an easy way to force a reload or cleanout of CSS changes is to: 1) Toggle the developer tools under the Help menu 2) put your cursor in the top of the developer panel 3) hit CTRL-F5 to force a reload.

On my system, the whole screen shows a sort of reload and then you know that the then loaded CSS code is in effect.

I had some issues yesterday trying to switch from usercss to normal themes, and figured out this was a simple option to force a switch after emptying out usercss / reloading CSS / switching to a standard theme, etc.

Again, merci beaucoup!

Multiple selected notes are still not highlighted for me using your newest userstyle.css

Have you forced a refresh? (Sometimes closing is not enough and you have to do either the method mentioned above or actually quitting Joplin from the Windows icon tray )

Regarding the multiple note selection, it does not seem to highlight them for me either.

My earlier reply was only for the "highlight the active tag" suggestion and to confirm that it works for sure.

When I hold and keep pressing shift, and then select an article in the Notes list in the middle, the highlight selection only works on the last clicked item.

Hope that helps

Adding here as I cannot post a 3rd reply....

When I select multiple notes, they do light up in the Explorer tool and the "multi note" tool bar shows up.

What I do not understand are the weird CSS class designations that start with "sc-fzpkJw...." Do these differ across user installs?

Also, in the circle, whey is the .note-list stuff greyed out? Seems like it is not active?

I forced a refresh by quitting the tray.

Made a GIF to show what I mean. I am holding shift when I click the note named "Start" and keep holding shift while clicking on the notes 'No 1' and 'No 3'. I expect that all the selected notes are highlighted.

So it looks like my last commit ( b34f3 ) is specific to my install (I suppose).

GIF 04-Mar-21 18-43-49

There is an ongoing discussion on the css elements that should have a class (see discussion), and this one should be part of the list.

Unfortunately, while editing note it is not highlighted in note list.

2 Likes

Yep. I see the same problem on Mac too.