In this repo, I have implemented the new design in CSS and HTML. Everything in structured around CSS variables, so simple color / font / size changes should be straightforward.
Notes: I tried to use existing class names and structure where possible. I added new classes where I thought it helped. I tried to stay true to the new design as much as I could, although I used the existing icons for simplicity and added back in indentation. I also created a few example themes.
I don’t feel confident implementing this in the current Joplin codebase, but my hope is that it is helpful to others as a starting point.
The dark mode is a good start. I would have liked it more if the blue highlight on notebook selection had dark tint or, better, same tone as the editor.
Thanks @uxamanda, I’ll take a look and see what I can integrate in the final version. You mentioned a grid based design, which I might borrow as it will be more flexible than what we have now. Also long term it will make it easier to dynamically add views, as will be needed for plugin support.
Most likely one issue is that for colours we use JavaScript to set them (CSS-in-JS) so I don’t think we can use CSS variables for this but I’ll check.
Sounds good, let me know if I can provide more explanation of the grid structure. I added comments to the code, but still might be confusing! Not sure if Joplin dev contributors ever have calls to plan code together, but would be happy to join / walkthrough if that would be useful.
RE: variables, I am not sure if there is a better way, but I’ve been on projects that do it two ways:
in one, the devs defined JS variables using the CSS variables and then used the JS variables throughout. This made everything standardized, but you aren’t able to see/edit the variables from the dev inspector tools, so it is harder to tell which variable is being used.
On another project, they stopped using CSS-in-JS and just defined classes in JS and did all the CSS more traditionally. This was much easier for designers to help make edits. Might have caused other issues, but nothing that I was aware of.
For theming, it may be useful to also look at having an ‘auto’ theme that, rather than specifically being light or dark, uses prefers-color-scheme to do both. This would allow automatic native-ish behavior on Apple platforms and on Windows 10 (even if not many people actually know the latter has a dark mode setting too).
