Relevant since I'm working on a custom Joplin theme (Joplin MacOS native theme (design mockup) - #6 by laurent).
Joplin provides the option to customise the interface with CSS. But because styled-components* are used (and classnames are randomly generated strings) there aren't so many classnames to attach the custom styles to. To achieve simple things - such as removing the search bar background color - you'd have to use selectors like
.rli-noteList > div > div > div:first-child. This CSS is
- hard to read,
- hard to maintain and
- brittle due to its dependency on the DOM structure; themes easily break when the structure is changed.
Besides, some things are also impossible to style, like selected items in the sidebar or notelist.
I'm planning to open a PR that adds classnames for top level components and adheres to the BEM (Block/Element/Modifier) naming convention. Before doing so, I just want to check if this has a chance of being merged.
*I have an opinion on using styled components for an app like Joplin, but I'll leave that for now.