[solved] Option control of appearance of sidebar & note list (font size and theme)

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" :slight_smile:

Hi!

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!

1 Like

This was merged after the last release, so it’s not yet available. It will be in the next release.

2 Likes

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!

Marking as solved.

That last example above covers the colors but the font must is controlled by a child element as adding it there is ignored

.synchronize-button {
    background-color: white !important;
    color: black !important;
    font-size: 1.5rem !important;
}

What would be the name of that class???
Is there a way to see dom elements like in a browser inspector?

I tried

.note-list .list-item {
  font-size: 2rem !important;
}

I was able to open the browser inspector from the Joplin Help menu.

In the menu bar, go to Help and then select Toggle development tools.

1 Like

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.

and here is my css file for the above look

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;
}
2 Likes

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.

1 Like

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.

Any more seems as though someone has pursued whatever it is you need.
vuejs ace component :slight_smile:

or start with a different markdown editor it if makes more sense.

Either way being a vuejs componenet no problem wrapping into quasar

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.