For the desktop app and speaking as someone who has stared at screens for 4+ decades which has resulted in ole 20-20 no longer achievable with correction....
Can there also be the same font-size/theme control for the sidebar and note list as for notes? On a hi rez monitor to me these are sadly tiny and unreadable (without straining). Plus more more readable for me is to have the notes in a dark theme and sidebars in a light theme. Such control is possible for instance in the Atom IDE and is the way I have it set up.
This person already seems interested in the look of such maybe he would implement this.
Alternatively if the app could respond to cntrl+/- like in browsers that would be enough. I could dial it up then dial back the note font size. This is an electon built app (like Atom) right? so built from javascript so that shouldn't be too much trouble he said lightly. BTW Atom can change the font size of elements manually but vscode has enabled cntrl +/- across entire interface. Anyway to change UI/tab/tree view font size? Ā· Issue #2530 Ā· atom/atom Ā· GitHub
Here I'll write the phrase that makes most UI devs (including myself) cringe
"coding for accessibility"
I think what youāre requesting is already possible in Joplin.
First of all, if you just want to change the font size of text in Joplin that isnāt in the note viewer, thereās a setting for that. Itās Global Zoom Percentage under the Appearance header of Options
Additionally much like the userstyle.css for customizing the note, Joplin supports a userchrome.css file for customizing the rest of the application.
You can search for userchrome.css in these forums to find examples of people customizing the app to their liking. The class of the sidebar is just side-bar with some other classes for the elements inside.
Here is an example that re-colors the side-bar and note-list
.side-bar,
.list-item-container,
.list-item,
div[toggleblock="1"],
.synchronize-button {
background-color: white !important;
color: black !important;
}
This isnāt perfect because it doesnāt properly re-color the sync message, but Iāll update when I figure it out.
Here is the updated userchrome.css, that properly displays the message, and adds changes to the note list
.side-bar,
.item-list,
.note-list,
.list-item-container,
.list-item,
div[toggleblock="1"], /* Notebooks and Tags headers */
.side-bar div div, /* synchronization message */
.synchronize-button {
background-color: white !important;
color: black !important;
}
.note-list a.list-item:hover {
background-color: grey !important;
}
Feel free to build off of this, or get as creative as you want!
also, the easiest way to create/edit a userchrome.css file is under the Tools->Options->Appearance tab that I mentioned earlier. If click āEditā next to the last option āCustom stylesheet for Joplin-wide app stylesā youāll be dropped into a text editor where you can paste this css into and get the changes you want! Remember to restart the Joplin app to see the changes take effect!
This is great. I had adjusted to my liking in atom using their style.less file. joplin being an electron app there was likely a css/less/sass/stylus file I could tweek just didnāt know where to look. Now I do.
But for those who donāt know about such things looks like (save being able to change theme in options) you have it covered in options/ shortcut keys. Thanks!
After a bunch of css fiddling my tired ole eyes are much happier!
I have one issue I canāt resolve without a change to the JS code. As it is for both the note and notebooks items the javascript currently computes a new color for an active item (placed in the style attribute) but does NOT add/remove an active class to that element. Thus there is no way for me to style the active notebook and note via this css. I did it in a bogus way by using the :focus pseudo but thatās only good until you click elsewhere. I guess if the devās donāt catch this request here Iāll make another thread.
Otherwise I am able to make the appearance just so. Maybe there should be a āgeezersā theme that is bigger font high contrast kinda like this. For non-coders messing with css isnāt a reasonable request and I figure Joplin devs would like it to go beyond just coders using it.
ā¦thx to posters and devs. Great and useful project.
A side note: Initially it wasnāt taking the changes because I had more than one Joplin instance running so in linux at least had a terminal open and used killall Joplin before restarting to be sure new changes to css would be used.
/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
/* Notesbooks & Tags Side Bar */
.side-bar > div {
background-color: white !important;
}
.side-bar .list-item-container,
.side-bar .list-item-container a, /* folder expander */
.side-bar .list-item,
.side-bar .list-item div /* number of notes in notebook */
{
background-color: grey !important;
color: white !important;
font-size: 1.3rem !important;
}
.side-bar .list-item-container:hover *
{
background-color: #C0C0C0 !important;
color: red !important;
}
.side-bar div[toggleblock="1"], /* Notebooks and Tags headers */
.side-bar .synchronize-button {
background-color: black !important;
color: white !important;
font-size: 1.3rem !important;
}
.side-bar div div /* synchronization message */
{
color: black !important;
font-size: 1.1rem !important;
}
/* NOTE LIST */
.note-list > div,
.note-list > div > a
{
background-color: white !important;
color: black !important;
font-size: 1.3rem !important;
}
.note-list > div:hover,
.note-list a.list-item:hover
{
background-color: grey !important;
color: white !important;
}
.note-list > div > a:focus,
.note-list a.list-item:focus
{
background-color: black !important;
color: white !important;
}
Thanks for following up with your solution/issues! This is valuable information for other users, so itās definitely appreciated.
The Joplin theming framework is not exactly unified, but a series of multiple patches that extend to cover the entire application. Particularly the userstyle and userchrome files which are not first class theming options in Joplin, but were added to give quick support to those with the ability to dive into css. Since the app was not built with this functionality in mind there are a couple of edge cases/rough patches as youāve experienced here.
Short term fix, a Github issue should probably be created that tracks aspects of the app that canāt be properly themed with the css files/elements that are missing classes (such as the synchronize message area). But long term weāll need to discuss the future of theming in Joplin. I intent to make a post later today/this week detailing a few options that I see.
Ok then. Iāll make a issue as I have noticed some other element/css issues like there is no proper container element for notes in notes list as there is for notebooks thus I couldnāt get hover to cover all when pointing at the list checkbox icon. They probably didnāt notice that as todo note is less common.
All important elements should have class name regardless if they are styled inline or not. That naming convention IMO should be BEM. BEM also allows one to avoid long lists of inefficient/confusing dependent selectors
Too IMO itās not great practice to programmatically style inline as that forces any changes to use !important. inline style should probably be reserved for a never changing style for that element
@CalebJohn - For possible discussion of Joplin frontendās future.
Related to the headaches of styling I use the frontend Quasar (Vue) framework which has full support for generating electron/cordova/spa/pwa apps. Maybe at this point the devs donāt want to do a complete front end refactor but that framework is worth a look. They do a very good job of using BEM and using containing elements. Further everything is a component which makes for a clear class hierarchy. It is so easy to āthemeā and to tweek (even from the frontend app)
Despite another web interface project out there I was thinking maybe Iād work on one using Quasar as Iād like to have internet access to my notes via the copy pushed to my private cloud server. Since quasar makes electron apps there is nothing says that couldnāt be another Joplin Desktop although with quasar context menu component I find that an spw/pwa is more convenient without giving up features. No install needed for end usersā¦well other then firing up say a docker container for the web server and joplin api.
example of interface I have build with quasar. Note the context menu support in browser
Looks interesting and is making my OCD less active. The appearance of the app is definitely a gripe of mine but much of its UI is definitely here to stay for a good while until the editor gets rewritten, according to responses to several posts Iāve made myself. A lot of its appearance is tied to the Ace Editor, but Iād love to see some life put into it a bit.
This is the one that Iām liking the looks of. Has built in plugin support, collab features and looks like itās built with an insane amount of customization. But thatās all from my limited perusal of its features page.
