OS: Arch Linux
Joplin Version: 1.2.6
How do I revert back to the old look of the application? I mean the one before v1.2.3
Is downgrading the only way? Or is there any switch I can flip to toggle this look?
1 Like
It should not, because this is also one of the important purposes of the update, but you can use user.css to customize the ui
Would there be plans of adding an option to follow the legacy look of the application?
I like the new look, it looks more polished and clean, maybe you can tell the community what your are missing from the old look? for me they look the same, except for the missing toolbar where the functions are better placed on the new look.
The fact that everything looked flat and minimalistic. I don't really know how to explain it. It's just my opinion/feeling.
My feeling is the new UI look is full readable but a little fuzzy in the sidebar.
2 Likes
For the record, as one user's datapoint for the devs, I'm not a fan of any project that supports "legacy themes" (that aren't trivial CSS changes) and backwards compatibility (beyond an iteration or two). It's a significant drag on attention, time, and resources. Make a decision and move forward. We the consumer can suck it up. 
Note. This is not a slam on the original question. It's a valid question and implied feature request. I just wanted to voice my opinion on the topic.
Cheers. -t
4 Likes
I agree with you : Legacy theme is dead 
, welcome to the new theme 
! Just It would be fine to have the new "light" theme with colors and font more readable (a little bit more "light", better for a day default theme). If not I will try to customize 
.
We tried to get the colour scheme at WCAG AA minimum, and often WCAG AAA, but it's possible some parts of it should be adjusted a bit further. If you find some custom CSS that works feel free to share and perhaps we can integrate to the main app.
1 Like
I thought that was just me! I found that reducing the font-weight seemed to me to make it look a bit sharper on my system. I also dropped the font size a bit but that was just personal preference.
userchrome.css
a[data-type="2"], a[data-type="5"] {
/* sidebar - notebooks (2) and tags (5) title text */
font-size: 12px !important;
font-weight: normal !important;
}
I also added a few 1.2.x related "tweaks" to the customisation wiki page if any of them are any use to you.
@dpoulton thanks 
Hope the Joplin Customization page increase and will be pinned somewhere (thanks @tessus)
How to apply your sample to the sidebar-options ?
It would be useful to have a template from the default theme as sample. And a customize instructions to change : font, font color, font size, background color for sidebar and each part of Joplin.
Maybe with version 1.3 someone purpose a UI extension to customize Joplin, instead of the userchrome.css modification.
Tools > Options > Appearance > Custom stylesheet for Joplin-wide app styles (Edit) & paste it in. Save the css file and RESTART (File > Quit) Joplin.
It's not quite as simple as that. This post gives a method of finding out what the css elements/classes are for the interface (also works for the viewer pane as well using userstyle.css). Also have a look at the "tips & tricks" area of the forum, there's lots of css stuff there.
I'm not so sure that would be such a good idea. Custom css has been possible with Joplin for ages but it has always been on the condition that no-one expects the css elements, classes, or even the actual interface to remain constant. It's unsupported and that prevents the devs being "hamstrung" by old code. If becomes a part the program there is then a need to support it. I would not be surprised if an interface allowing full and intuitive customisation of all elements would be larger than the current code for Joplin itself!!!
To be honest, "vanilla" Joplin is really rather good. It's "icing on the cake" to be allowed to abuse it so much with user css styling.
I meant the sidebar inside the option section (tools > options).
For the first sidebar, I tried to add a background color section, but it's not correct :
}
element.style {
}
div class="sc-fzoXzr jDcJEE side-bar"
.jDcJEE {
background-color: #344563;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
display: inline-flex;
flex-direction: column;
}
If the dev tools indicate that the class jDcJEE controlled the formatting you wanted to change, say, the background. It would look something like:
.jDcJEE {
background-color: #344563 !important;
}
Regardless, all of these classes, such as sc-fzoXzr and jDcJEE appear to be randomly generated with each Joplin build. So even if it worked now it would not work for later versions and you would have to hunt them down all over again.
For instance it looks like my equivalent of your classes above are different.
For me .idmeAn would control panel background colour.
.idmeAn {
background-color: darkblue !important;
}
The dev tools shows that pretty much all of the css that controls how this options section looks is defined using random / temporary css class names. I decided that as I did not intend to spend lots of time in the options it was not worth seeing if I could modify the css by stringing together a whole load of divs and other "traditional" css elements in order to try to make it work. Basically I use the user css to "tweak" an existing theme for the bits I use and find not quite right for me, not create a new one.
I think there are two places where I feel uncomfortable, compared to the old theme.
1
The title has no box, which seems to imply that it can't be changed, just like "Joplin" at the top of the form.
2
Adding new notes becomes an icon, not as intuitive as the previous text.
Visually impaired man's screen reading software relies on text.
Icons are not friendly to them 
Just one thing I couldn’t do : change the space between letters for first screenshot.
font-stretch: expanded !important;
That give :
a[data-type="2"], a[data-type="5"] {
/* sidebar - notebook (2) and tag (5) title text */
font-size: 12px !important;
font-weight: normal !important;
}
.idmeAn {
background-color: #344563ed !important;
}
.jDcJEE {
background-color: #344563ed !important;
}
.jdqzdQ {
font-size: 14px !important;
font-weight: normal !important;
}
div.editor-toolbar div button {
/* removes the WYSIWYG button */
display: none !important;
}
Last one not necessary.
font-stretch is a new one on me but an on-line css resource does say:
Note: This property has no effect if the selected font does not offer condensed or expanded faces!
Also, as stated before, when the next version of Joplin comes out there is a good chance three of those selectors (2, 3 & 4) will stop working.
So I'm trying to again restore the level-based shading in the left nav pane, and if I'm reading the HTML right, the '.list-item-depth-x' class information has been removed (except, agonizingly, for one level).
Again, my hierarchy is both flat and complex, so visual clues to nesting are important-bordering-on-critical.
I'll research if no one knows, but is there a way to get the level using just CSS?