Since I started working on the Drupal Event Platform initiative, a request that I've heard more than once is for a configurable theme. I have considered making a subtheme of Olivero that would expand the number of configuration options available, to allow for more options in the overall site styling, potentially including things like spacing, border-widths, and border-radius. I've spent some time under the hood with the Gin admin theme, which makes extensive use of custom properties (aka CSS variables) and even exposes a few of them as configuration options. When I revamped this site a few months back, I decided to follow a similar approach, leveraging properties as much as possible. So I knew a configurable theme was possible, but I also knew it would be a lot of work. A LOT.
That's why I was excited to read a blog post about the Artisan theme. It sounded like it might be exactly what camp organizers have been wanting for the Event Platform: a way customize the looks of their camp website without having to write code. I even covered it in a Module of the Week segment of the Talking Drupal podcast. I recently had the opportunity to do a deeper dive with the Artisan theme. Here are some initial observations.
First off, as promised the theme does indeed allow you to tweak the formatting of your Drupal site through the UI. The catch is that you need to run npm to turn that configuration into CSS. So working locally, you'd probably want to run the provided command that has npm continuously watch for changes, while you're customizing your theme. There's a separate npm command intended to be run once (every so often) for your production environment, or potentially as part of your CI pipeline. So it works as intended, but there's a little more technical complexity than just clicking around and having your site visually changed. It still feels more like a developer tool than what would be ideal for the Event Platform.
It's also worth mentioning that the experience of tweaking the theme in the UI is itself not overly intuitive. True, you could tweak the colours in the palette within the Base tab and have those cascade out to all the elements in the other tabs automatically, but out of the box not all of the palette colours seem to be configured anywhere, and for someone using the theme for the first time, it isn't clear how changing colours will impact the overall design, so it requires some trial and error.
The theme does include a concept of presets, so it is possible that if the Event Platform was to adopt Artisan as an official theme option, we could provide one or more additional presets (Artisan only ships with two) with the intention of having a more intuitive starting point. We could also provide our own documentation on how to use and customize using any Event Platform-provided presets.
The colour palette does work as a nice way to quickly customize a broader set of values. I did find myself wishing it were possible to add new colour options/variables, and I also wished it were possible to have a similar set of sizing variables that could be used to easily tweak broader values for padding, border-radius, and so on. Again, this is something that the Gin theme uses extensively, and then exposes a single input that lets a user choose how loose or tight they want the theme to feel.
The Artisan theme does also allow a site builder to specify which fonts to use for various elements, but there's a limited set of fonts to choose from, unless you manually (e.g. through code) add more fonts to your subtheme. The provided starterkit includes the Arima and Roboto Google fonts, but you can modify / extend this list by editing the _typography.scss file in your subtheme. I thought about adding the @font-your-face module as a way to add fonts through the UI, but it doesn't yet have a release that is ready for Drupal 11, so unfortunately that isn't currently a viable path.
My overall conclusion is that the Artisan theme is not the solution I'm looking for, at least for the Event Platform. That's not to say it couldn't be useful for a variety of other use cases, maybe even for a project you're about to start as you read this.
Comments