So, a month ago, someone contributed a merge request to improve our theming system (https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/1094). I lacked the time to review it properly at the time, but I got back at it this week.
After playing with it, I decided to go a step further, and do a major cleanup of our CSS to reduce its size and make theming way easier.
Took me a full week, but today I can share the result!
- 45% reduction of our CSS (from 715 KiB to 405KiB). It's still huge, but it's less huge ;)
- Use CSS vars for theming, this was actually inspired by the work I've done on Tempo last month
- Writing a new theme now requires 30 lines instead of 300 (and gives a better, more consistent result)
- The new system unlock some interesting features, e.g having a theme editor in the app, or per-user or per-pod themes without rebuilding the front-end
I've also moved all CSS from .vue files to our style directory, meaning it will be easier to maintain and to factorize in the future.
All this work was pretty exhausting and involved, but in the end I think it's worth it.
The attached video showcase how tweaking theme variables, directly in the browser, affects the UI (sorry for my bad color taste ;)
As you can see, it's way less involved that the previous approach wic required overriding existing rules in each theme.
@agateblue oh that's real nice! good job :3
@cblgh thanks, it was an intense week, but it was worth it!
@agateblue This looks absolutely great. Thank you for all your work on this 🙌
The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!