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. 
It's been discussed before and @tessus is maintaining a thread about it: List of CSS elements which should have a class
If you want to create a pull request, I think it would make sense to show what you have in mind first by modifying just one or two files.
Also styled-component is not the issue here because before we'd just set the style directly on the element so there weren't class names either. But isn't it possible to get styled-component to use a non-random class name? I seem to remember it's possible to get it to convert for example <StyledEmailInput> to <div class="email-input"/> which would be ideal.
1 Like
If someone has time to explain, why does Joplin use random class names? I've never seen them before.
It's the way styled-component works. It dynamically creates classes and assign a unique hash to them. Normally it's not an issue since once the element is created and styled you aren't supposed to modify it with an external stylesheet, but of course to support userstyle we would need more stable class names.
1 Like
Good to know about that list, thanks a lot!
I seem to remember it's possible to get it to convert for example <StyledEmailInput> to <div class="email-input"/> which would be ideal.
As far as I know, that's not possible. Of course you can add extra classnames besides the generated ones, which is what I'm proposing. I'll create a small proposal for this.