Make Theme Switching Easy with UXPin Merge

Theme switching is an essential part of designing prototypes. Whether that be changing between a simple light and dark mode or testing several client’s themes on a single prototype, it is something that all designers need to consider and have a well-thought-out process for.

Furthermore, this need has become increasingly important with the adoption of open-source Design Systems, such as Material-UI, which have become a valid choice for projects.

So, theme switching functionality – such an integral part of the design process, enables to dynamically test themes on-the-fly without using multiple design systems or layouts. It is an amazingly efficient and powerful feature to have at your disposal.

With the importance of this feature, we want to show how this can be done in UXPin, thanks to the power of Merge and designing with code.

Want to use the power of Merge yourself? – Get access to UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

Why do we need a Theme Switcher?

You don’t have to be a white labeling web design agency or a large-scale company with several brands to make use of a theme switcher, you could be a sole developer wanting to quickly test a new color scheme. But, switching themes is sometimes no easy task.

You don’t want to be making multiple layouts of a single prototype just with different themes – that’s an incredibly tedious process just so you can test something. 

Using the Material UI library, we can explain this limitation. Material UI has themes already built into their components but UXPin (and many other prototyping tools) don’t have a unified dynamic way to switch between themes that can be used by both developers and designers.

The power of Merge – designing with code solution

Merge gives you the freedom to design with ‘real’ production React code and vector-based tools together, breaking free of previous limitations. That’s why Merge is powerful.

You can make use of Styled-components. Styled components are the perfect solution to our problem as you can inject Javascript into the CSS to create editable theming capabilities.

So, creating themes is easy.

For each theme, create a file containing css values you want to inject into your styled components as properties. Then, from the list of imported themes, you can simply select the one you want and the styling of that theme will be passed as props to the html elements.

So, what if you just created files for each theme you wanted, import them into a wrapping theme switcher styled-component, and then pass those values down into each nested child component. Then, all you need to do is change the theme at the top-level component using the Javascript props injected into the Styled Components CSS.

Creating a Theme Switcher Component

First, we create a component named ThemeSwitcher, that functions as a top-level wrapper component, passing a selected theme’s styles to all nested components. When components are nested in the ThemeSwitcher, you can dynamically switch between any imported themes – themes, which can completely change the look and feel of components, while keeping all their functionality.

The code below shows the simplified structure of ThemeSwitcher and a breakdown of how it works will follow.

import blue from "./themes/blue";
import red from "./themes/red";
import dark from "./themes/dark";
import light from "./themes/light";
 
 
function ThemeSwitcher(props) {
 let selectedTheme;
 
 function getTheme(themeProfile) {
   switch (themeProfile) {
     ...
   }
   return selectedTheme;
 }
 
 function makeCustomTheme() {
   const customTheme = createMuiTheme({
     ...
   });
   return customTheme;
 }
 
 return (
   <MuiThemeProvider theme={getTheme(props.themeProfile)}>
     {props.children}
   </MuiThemeProvider>
 );
}

As you can see, it’s a simple React component using the Material UI’s imported hooks, only two functions, and a return statement to pass the theme down as props.

Inside the return statement, we have the MuiThemeProvider component. This is used as a wrapper component that passes the selected theme as props down to the child components.

getTheme()

We created themes using Material UI’s styling guidelines, then imported them into the Theme Switcher component.

import blue from "./themes/blue";
import red from "./themes/red";
import dark from "./themes/dark";
import light from "./themes/light";

To keep track of which theme is selected, we pass a drop-down target value into the getTheme function and pass the result as a theme prop in the MuiThemeProvider component in the return statement.

function getTheme(themeProfile) {
   switch (themeProfile) {
    // _.merge combines two themes together
     case "light":
       selectedTheme = _.merge({}, igloo, light);
       break;
     case "red":
       selectedTheme = _.merge({}, igloo, red);
       break;
     case "dark":
     selectedTheme = dark;
     break;
     case "custom":
       selectedTheme = makeCustomTheme();
       break;
     case "blue":
       selectedTheme = selectedTheme;
       break;
     default:
       selectedTheme = selectedTheme;
   }
   console.log(selectedTheme)
   return selectedTheme;
 }

return (
   <MuiThemeProvider theme={getTheme(props.themeProfile)}>

When in the  UXPin editor, this is what the theme selector menu populated from the getTheme function would look like.

makeCustomTheme()

Not only do you have the option to import completed themes, but you can also create custom temporary themes within the UXPin editor. We’ve only included a few properties such as primary and secondary colors for simplicity but you go into as much detail as you need.

Below is the code of the makeCustomTheme function. This makes use of Material UI’s built-in core function of createMuiTheme, which creates a theme based on options received. 

function makeCustomTheme() {
   const customTheme = createMuiTheme({
     ...selectedTheme,
     palette: {
       primary: {
         main: props.primaryColor
           ? props.primaryColor
           : selectedTheme.palette.primary.main,
       },
       secondary: {
         main: props.secondaryColor
           ? props.secondaryColor
           : selectedTheme.palette.secondary.main,
       },
       decoration: {
         main: props.decorationColor
           ? props.decorationColor
           : selectedTheme.palette.decoration.main,
       },
       headerBadges: {
         main: props.headerBadgesColor
           ? props.headerBadgesColor
           : selectedTheme.palette.headerBadges.main,
       },
     },
   });
   return customTheme;
 }

That concludes one way to include a dynamic Theme Switcher in your design system. Just a wrapper component (Theme Switcher) passing properties to nested child components, allowing you to dynamically change the theme without creating a new design system, page or layout.

Try Theme Switching in UXPin Merge

Using UXPin Merge gives you so much flexibility and creativity when comparing it with other design tools on the market.

Focusing on a code-based, single source of truth for styling and functionality creates an interconnected system, bridging the gap between designer developer handoffs. Anything you can create in a React component, you can bring to life in your design system. You don’t have to rely on 3rd party plugins or APIs to add important features to your design system. You’re free to create dynamic and interactive prototypes while changing styles with a single command. 

Want to find out more about Merge or would like to try it for yourself?