One of our recent projects required a progressive enhancement approach for visual changes. Instead of a full end-to-end rebuild of a Drupal theme, a progressive approach can be accomplished with theme switching. Many Drupal 8 projects leverage custom block types, Paragraphs, or Layout Builder to place one or more design components on a page. This provided the client with the ability to split up a larger architectural change into a small set of pages and components that can be gradually rolled out. Of note, such an approach can also serve as a viable solution for A/B testing of visual changes.
Understanding Context
There are several solutions capable of providing theme switching. One key differentiator is context. Do you want to switch a theme by page, role, language, associated taxonomy, URL parameter, or authenticated/unauthenticated traffic? Context serves as a critical requirement for determining when a theme switches.
In our case, we progressively enhanced a theme page-by-page. We would work on one page, configure the theme to switch for that page, and continue to add pages as our work evolved. Solutions may vary based on the desired context. The rest of the blog post helps explore solutions for page-level context.
Background Research
I explored the following approaches to help solve the problem.
- Theme Key module: This is a very popular approach from Drupal 7 sites but did not appear to have a Drupal 8 release and this issue paints a murky future for any sort of use of the module.
- Style Switcher module: This offers a block for switching themes, sort of like CSS Zen Garden where you could select the look and feel. This wasn’t quite the context we needed.
- Switch Page Theme module: This was most effective for our use case. It allowed both page-level specificity and optionally allowed us to select the applicable roles. It also offered configuration, which was helpful for deploying progressive theme switching with theming changes.
Setting Up Switch Page Theme
It’s basic configuration. No programming is required.
The configuration page is fairly straightforward. Each rule is demonstrated by a row and can be ordered if there are rules that take precedence over others. The checkbox demonstrates how to enable or disable a rule as needed. Page paths are specified line-by-line per rule, followed by the selection of the displayed theme and the applied roles.
After saving, going to the various paths should switch the theme as specified. And, don’t forget to export the configuration.
Conclusion
We were able to set up a new theme and gradually build out the various components with a theme switching approach. This allowed us to deploy changes over time instead of deploying an entirely new theme all at once. Switch Page Theme was an easy to use site building solution for us to specify the desired theme switching behaviors.