Effortless theming
One of the biggest challenges we faced with having multiple clients was how do we manage their themes and still maintain a manageable codebase?
Our subscription interface is the core of our product. It allows users to manage subscriptions quickly and easily, allowing them to set it and forget it.
In this case, I was designing not just for the partner, but also for our development team. We needed a way to match our application to the partner's look and feel while maintaining a single application.
One of the goals of our product is make the experience seamless. Our subscription interface needs to look like it's part of the client website.
As I'm not just a designer, I also have extensive experience with HTML and CSS, I was tasked to come up with a way to maintain a single code base and apply the appropriate theme at load time.
CSS Custom Properties
Custom properties allowed us to assign each property we'd need to customize to a single variable. We then created a file with each partner's variables, assigned their values, and applied it with Angular host binding.
Another advantage to custom properties is that you are able to set defaults. If a variable isn't read for some reason, the default will be applied. This ensures our app will always look good. We've also set specific default colors so we know immediately if something is broken.
Angular Host Binding
Host binding allowed us to apply the custom properties at the DOM root. We created a parent class that was called by our partners using their channel ID, and cascaded the variables throughout the app.
Theme Directive
At first we had a host binding in each Angular component. I realized maintaining that would quickly become a nightmare, so I moved the code to a directive. Now we're able to wrap each component's HTML in a simple tag. The directive is called and all themes are applied.
The developers leveraged this directive to apply text and other changes to the various components, making a truly customized experience for our partners.
Here's the final product. Both sets of the images below use the same codebase. The custom properties allowed us to customize everything for our partners, from the font to the buttons, to the very layout itself. This feature has become the foundation of our product. It allows us to be flexible, fast, and most importantly, extremely scalable.
