There have been a lot of conversations around theming (https://discourse.joplinapp.org/t/plugin-css-improvement-ideas) , I took a deep dive into how I think we might better approach things.
From settings, users can choose between a handful of stock themes in dark and light mode and (on desktop) customize some basics like fonts and size.
- are not CSS based / are compiled, so they are built to work in desktop and mobile
- are integrated with plugins (the plugin developer has the ability to uses the joplin css variables without knowing what theme the user is using)
- super easy for a user to find / switch in preferences
- making a theme require knowledges of how to build a "joplin theme" (which isnt documented?). I recently went through this process, and it took me a while to get the app building properly, and then figuring out what the theme is changing (i intend to publish this, but haven't had time)
- Only affects colors, doesnt affect layout
- Bundled into an app release
- as customizable as the theme developer wants!
- can make / customize a theme with only normal CSS knowledge + dev tools, no Joplin specific knowledge needed
- don't need to build / run the app in dev mode
- can do whatever you want in the app (hate that button? hide it, want to move a feature to a new spot, go for it, your CSS hacking skills are the limit)
- extremely fast to add things (I change my css at least monthly, often much more often)
- hard to distribute, other's have to manually keep up to date
- fragile, the app does not have many built in CSS classes, and so there is a lot of span > div > div:first-child nonsense. even without strict classes, I suspect this makes the devs more hesitant to change structure (even though there is a warning it can/will change)
- messy, have to keep it well documented to remember what does what
- not everything is "reachable" without CSS classes because the style is being applied directly to an element that is the same from an HTML perspective (for instance, selected notebook was impossible to style until a class was added)
- does not work on mobile
- different "hacks" break each other's functionality, so need strong css skills to keep things stable
Warning: I need lots of feedback on how this could be realized Please take any "implementation details" as directional only, I don't know the right way to do it yet.
While there are only a half dozen regular developers, maybe a dozen plugin developers, there are another dozen of us in the forums who contribute regularly to CSS. Right now, all of our CSS is haphazard and messy. (Every time I post messy CSS with lots of
!important tags I feel like I am setting that user up for confusion later.)
My dream scenario looks something like this:
- random new user makes a request for "theme" type change. I see how to change that with CSS, and instead of just giving them a random code snippet, I have some way of adding it somewhere so that it becomes a new setting / toggle in preferences. If it really feels like a 1 off, maybe it goes into an "experimental" or "advanced" area that most users wouldn't see.
- ideally i could give someone "temporary code" that works immediately, while at the same time putting it into the main app as a new option for theming.
- Right now the plugins are in iFrames and can't "see" the main CSS. I think this is going to be the biggest hurdle to making this work right.
- Oh... and mobile... (would still ideally have this be CSS)
Seeing how plugins are working out (very well), I feel like the app itself can become very modular and it would give us a great framework to build themes on.
For example, take tags:
- Right now, they are connected to notebooks in a way that isn't really needed
- ideally they could be moved to it's own column or below sync or whatever
This probably sounds unnecessary, is it that big of a deal to be able to move that? No, not at all, but by making everything strictly modular, we can make super consistent classes that make CSS easy to build on. Users can also use the normal "change application layout" to move things around.
For instance, every "panel" (i.e. a plugin, Tags, search, sync, tags) can have (at least) a top level panel class. From that, I can easily define margins and sizing and spacing, etc across all panels. Likely there'd be other main classes we use, for things like lists and such that make them easy to theme together). Then each panel would have an ID (
joplin_tagsor whatnot) so that I could provide specific CSS for that panel as appropriate.
The goal of this is to build a "way" of building panels and new features that make the main devs able to focus on the features and not get bogged down in the styles, thus (hopefully) saving time and shifting responsibility.
Risk: Maybe there aren't actually that many people who want to help with theming, and the main devs are less interested in CSS.
I've talked about this before (Any suggestions on what plugins could be created? - #155 by uxamanda), but imagine that in settings, the CSS that us "theme builders" make gets exposed as color pickers and drop downs for size etc. Ideally the user could export those variables and that is what is passed around in the forums. (I.e. base_color: #000000, font_size: 20, "hey guys, this is a great e-ink customization") I know that still has people passing things around, but instead of CSS code, it is just variables and therefore much easier for non-coders to comprehend. If any of us see a theme that is looking really nice, we can save those variables and make it a "stock" theme.
- I consider the MacOS theme to be a huge leap forward in design. I know its only been a few months since Joplin was "redesigned" but I would love to see all the changes from that theme integrated as the stock design. Looking through the CSS that is making that work is clearly an effort of love, but it is unnecessarily complicated. Ideally we could (I include myself in this we!) break down that theme into not just the style changes but work through the structure changes that would enable this "CSS theme world".
I realize this post is rambling, but wanted to get some conversations started!