hello!
I'm celine :D
I'm one of the cofounders of Leaflet, and I handle a lot of the design!
Theming is SO important to us!!! I'm here to chat a little bit about our approach to theming, as well as some of the (many) problems we've solved and are still solving!
Thoughts on theming in general
Before we started building blogs on ATProto, Leaflet was originally a standalone writing tool (like Google Docs or Notion). Even then we felt that writing is personal, and people ought to be able to express themselves not just through their words, but also through their stationery.
We built theming as a central pillar of Leaflet so that anyone can build their own perfect writing surface for the web!
As we switch our lens to be more explicitly for publishing, our focus on expression has only become more important.
But endless freedom is also endless choice and endless choice is endless choice paralysis. At some point it stops being fun!
In general, this is a balance we're looking to strike:
most freedom to make a doc that feels like you
while still keeping the experience of setting a great theme simple and fun...it should take less than a minute!
It’s been a quite hard line to maintain lol.
Struggles with theming
To make sure you have the freedom to build a theme that feels like you, we try not to make any choices for you. We don't autogenerate palettes for example!
But we still want things to be legible and look nice as long as the theme itself is reasonable (i.e. black text on a black background would be impossible to read no matter what we do!)
We've done a LOT of iteration/fixing/tweaking to achieve this! Here are a few things we've figured out.
getting a full range of text colors
To maintain good visual hierarchy, it's important to have a gradient of base text colors, ranging from a dark primary text color to a light border color. But asking you to manually set all 5 colors we use in our interface seems like an impossible slog D:
So we calculate these! We mix your chosen text color with your page color to get a smooth gradient effect.
getting the best accent for the situation
When you pick accent colors with buttons in mind, you might pick a vibrant background and a light text color, or a light background and a vibrant text color. But for links, you always want the vibrant color.
If we only ever used accent 1 for links, then depending on the theme, links would sometimes be completely illegible!
In order to make sure we show the vibrant color where we need to, we calculate each accent against the page background and choose the more contrast-y one.
dealing with noisy background images
One of the best ways to inject character into a page is to use a background image! You can even use a gif! Background images are the secret sauce to a mind boggling variety of vibes!
It also introduces a huge slate of legibility problems though... What if you choose an image with a lot of contrast to it? Your text won't show up in some parts no matter what color you choose for it.
To make sure you can still read your text, and the text in menus and toolbars, we overlay containers on top of the image.
But wait! Aren't we just hiding the background you put so much work into choosing...
We weren’t sure how to preserve the character of the background image while also maintaining legibility, but eventually landed on letting you change the opacity of the overlay so you can still see your image!
Changing the opacity can lend a lot of its own character to the page as well.
Sometimes I wonder if the styling of our page container is imposing too much unwanted character in your doc... I’d love to one day introduce border styles or options to adjust the margins!
highlighting things that are selected
In our editor, it's important to see what things are selected/active (buttons, blocks, menu items etc). In other apps, this is usually achieved by darkening the background color slightly or perhaps adding/thickening the border.
We do sometimes change background color! Unfortunately, it's just not the right solution in many of our cases. It might not have a background to darken, or doing so would look intrusive.
In those cases we need to add/thicken the borders! But if we thicken just the border, it can be hard to tell the difference between a selected and unselected element. And in low contrast themes, it can be hard to see the border at all.
To compound this problem, at some point we thought it would be a good idea to let you put background image on pages and the extra noise makes it all the more difficult, oh no!
To solve for this, our selected state puts an outline around the element a couple pixels away from its border. This extra gap makes it way easier to see the selection, and the extra thickness makes it much clearer that something is highlighted.
More dreaming for theming
There's a lot of things we still need to do for theming!
Fonts are coming very soon, for one! We've selected a set of great font options and are working on adding to theme settings.
We also want to offer a LOT more options for adjusting the layout of your publications and posts. This will probably be an all new, and much more complex theming system, so I'm thinking of it as an opportunity to do a version 2.
But we've also come a long way!
Thanks for reading!
bonus: the (un)holy cycle of product development...