Building a Flexible Theme Engine

Mentimeter's interactive presentation platform required a sophisticated color system that could handle both consistent UI theming and user customization. As part of a three-person team establishing the design system foundation, I focused on developing the color model and theming functionalities. The platform needed to maintain brand consistency while allowing presenters to customize their presentations' appearance, affecting both the presentation and the audience voting interface.

Challenge

The initial challenge stemmed from a limited brand color palette that proved insufficient for complete UI needs, leading to inconsistent color usage across the platform. The system needed to support both predefined themes and custom branding while ensuring accessibility standards were met. A unique requirement was the ability for presenters to customize their presentation themes, which would then affect the voting interface for their audience.

Solution

The system was built around a JSON-based design system configuration, structuring colors through semantic naming and color manipulation functions. This configuration served as the foundation for both our predefined themes and dynamic color generation:

colors: {
  brand: blue,
  brandContrast: white,
  brandBase: black,
  bg: white,
  body: blueDark,
  text: alpha(blueDark, 0.75),// Creates semi-transparent text
  meta: alpha(blueDark, 0.5),// Creates lighter meta text
  
  white,
  
  shade: shade(white, blueDark, 0.08),// Creates very light gray
  button: shade(white, blueDark, 0.15),// Slightly darker shade for buttons
  border: shade(white, blueDark, 0.3),// Darker shade for borders
  layer: shade(blueDark, white, 0.2),// Creates overlay colors
  shadow: black,
  
  currentColor: 'currentColor',
  
  success: green,
  destructive: pinkDark,
  warning: yellow,
  upgrade: green,
  highlight: pink,
  info: purple,
  neutral: shade(white, blueDark, 0.3),
}

Dynamic Theme Generation

The system's flexibility shone through in its handling of custom themes. When presenters customized their presentation, they would select a background color, text color, and five visualization colors, with the first visualization color serving as the primary accent. From these base colors, our system would automatically generate a complete theme using two key color manipulation functions.

The alpha()function created new colors with specified opacity, calculating their appearance against a white background. This was particularly useful for creating subtle variations in text colors and disabled states. The shade() function, on the other hand, mixed two colors together with a specified ratio, allowing us to generate a range of intermediate colors for various UI elements.

These functions worked in tandem to create consistent, accessible color schemes regardless of the user's input. For instance, when a presenter selected their colors, the system would automatically generate appropriate shades for buttons, borders, and overlays while ensuring all color combinations met WCAG contrast requirements.

Technical Implementation

For developers, the system offered a straightforward approach to color implementation. Rather than using specific hex values, they could reference colors semantically (e.g., color="bg"), which significantly simplified theme switching and maintained consistency across the application. The voting view was wrapped in a theme component that would update automatically when presenters modified their presentation's appearance.

Results

The implemented color system transformed Mentimeter's approach to theming and visual consistency. It successfully unified color usage across the platform while providing the flexibility needed for custom branding and user customization. The system's automatic color generation and accessibility checks ensured that all presentations, whether using predefined themes or custom colors, maintained professional appearance and usability standards.

Key Learnings

The project demonstrated the power of systematic color generation in creating flexible, maintainable design systems. Semantic naming proved crucial for system scalability, while the combination of color manipulation functions provided the perfect balance between standardization and customization. The success of the automated accessibility checks highlighted the importance of building safeguards into customization features, ensuring that user freedom never compromised usability.