Hello everyone, I've made a couple of tweaks to the main desktop user interface in order to make it neater and better aligned with MacOS apps (that's the platform I use Joplin with). I tried a plugin for that but it didn't quite solve the problem for me.
I don't work as a designer since ages, and it certainly could be improved further, but to my eyes the interface looks WAY better now with only minor tweaks (mostly alignement, minor color and size changes, neutral font substitutions). Since I am not used to React (I am oooold school...), my CSS is certainly a big mess, so I won't make any pull requests. I'll post them here anyway, in case anyone wants to use it, or if anyone with better technical capabilities decides to integrate the design changes to the actual code.
userchrome.css (3.3 KB)
userstyle.css (76 Bytes)
PS: I also removed the "new to-do" button as I don't use it. I think having this as a setting would make it way more straightforward for all using it for note-taking only.
8 Likes
I can’t quite pin point the changes (aside from the search field) but it does seem more pleasing to the eye. Is the line spacing for the folder wider? Can you post a “before” picture of the same view w/o your changes?
I normally use Andre Jilderda's joplin-macos-native-theme plugin, but this looks interesting. I installed it tonight and I have to say there are some good design choices. I use Inline Tag Navigator for my to-do's, so I like you removed the to-do button. I like the bigger New note button, in fact that whole section is nice. I shouldn't be surprised Helvetica Neue looks good, though the kerning is a little tight. I do miss the folder icons and round check boxes from Andre's plugin, but that can probably be added. Yeah, I would say this is a good theme. I'll continue to use it on my personal Mac and use Andre's at work, I think. Good job! Consider checking it into github so you can update it there. Congrats!
2 Likes
Sure, I am glad you enjoyed it! This is how it looked like on my Mac without the userchrome tweaks:
The differences are mostly white spacing and trying to bring things closer to vertical alignment (e.g. so that the note title in editor, the buttons and the notebook list header are vertically aligned), suggesting a common grid across the interface (still far from getting the whole thing right, though). Also things that are not immediately important got more subdued (like the sync info stuff, note/tag count, note creation date etc.), some other were made bigger to create a deeper sense of visual hierarchy. I made the buttons round so that they cannot be confused with other rectangular, non-clickable elements. The frame around the note-ordering buttons were removed, as the fact of them being blue is enough indication of them being clickable, everything else around it is noise etc.
In the specific case of the note, I did the opposite and I broke the horizontal alignment in favor of more white space and the idea that the main note itself is kind of a paper page that you're editing inside your app.
As for the kerning, I think you're right, I didn't touch it yet! In case I make further changes I'll upload it to github and update here.
1 Like
