Playing with themes / CSS for new design

As I mentioned in this thread: Desktop new design is nearly ready, please cast your final vote!, I have been playing around with how the new design could be implemented to make it more easily theme-able.

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.

Kudos to the designer who created the original mockup!

Base theme, in CSS

Dark mode example

Note: there are couple more theme examples in the repo



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.

1 Like

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).

This is already supported in Options => Appearance (auto-change theme to system theme)