Migrate Your Themes with Ease

[dsch]

Have you ever tried to maintain a set of related themes, e.g. a light, dark, high-contrast black and white version? Where you had to change every parameter multiple times, once for each theme?

Have you ever created a theme based on a newer SAP-provided theme and copied all changes and resources from your existing theme to the new one? Even more with the recent push away from older SAP-provided theme families like Belize?

Let me introduce you to “Migrate Theme”, a newly released feature of UI theme designer.

In this post, I’ll show what you could’ve done to migrate themes in the past, what the new “Migrate Theme” feature looks like, and how you can use it to make your brand shine.

In the Past: Manual Migration

There are times where you have to migrate themes. Some common scenarios:

• “Theme sets”, i.e. sets of related themes; say you already have a light version of your theme and you want to provide a dark version or even high-contrast versions of it
• Themes based on SAP-provided themes that are no longer maintained or don't meet the necessary accessibility requirements.

In the past, you had to either

• manually create multiple themes and perform every change in all of them; or
• create one theme, export it, unzip the exported theme, change the sName and the sExtends in all .theming files to the SAP-provided theme you want, zip it again, import it again, and hope for the best.

Migrate Theme in the UI Theme Designer

UI theme designer on SAP BTP Cloud Foundry offers a new action for existing themes: the “Migrate” button. You can find it next to the other actions (like “Edit”, “Publish”, “Rename”, etc.).

Once you press the button, the Migrate dialog opens, with three pre-filled input fields:

• Theme ID allows you to define the ID of the new theme that is created by the migration. It is pre-filled with a not-yet used ID based on the ID of the theme you are migrating.
• Title will be the title of the new theme. Again, it is pre-filled with the title of the theme you are migrating, but we try to find common theme names and replace them (e.g. if you are migrating “My Belize” to Horizon, the suggested Title will be “My Horizon”).
• Based On is the technical ID of the SAP-provided theme you want to migrate to. Here you can select a theme from the latest two supported SAP-provided theme families. At the time writing, this covers Horizon and Quartz. We try to be smart: When migrating from an older family to a supported one, we keep the same flavor (e.g. migrating from sap_belize to the Horizon-family will select sap_horizon); but when migrating a theme from the latest supported family, we will select the inverse flavor (e.g. migrating from sap_horizon will select sap_horizon_dark).

Keep in mind that you can change all values, we are simply suggesting reasonable defaults.

Then, all you have to do is press OK.

With that, a new theme is created based on the SAP-provided theme you selected for Based On, with the ID and title you specified as Theme ID and Title. Furthermore, the following is copied from your existing theme:

• Parameters you changed or created,
• Resources you uploaded (e.g. logos and background-images), and
• Custom CSS you authored.

The theme you migrate from remains intact and can be used or deleted at your convenience afterwards.

Keep in mind that this automated migration might not be perfect and that you may have to polish the migrated theme a bit. It is possible to create scenarios where this automated migration yields unexpected results or even a theme that can’t be compiled. E.g. you may have mapped @sapButton_Background to @sapButton_Hover_Background in a Belize-based theme. However: If you didn’t change anything else, that would create a circular dependency in a Horizon-based theme, because in Horizon-based themes, @sapButton_Hover_Background maps (indirectly) back to @sapButton_Background. With that, the migrated theme can't be compiled.

But except for such edge cases, automated migration saves a lot of effort and yields very good results.

What You Can Do Now

With the “Migrate Theme” feature, you can easily create copies of your themes that are based on different SAP-provided themes. This allows you to

• Create the basis for your own set of related themes once; then, once you are happy with the result, you can migrate this theme to all flavors you want to support; and
• Move your theme away from legacy SAP-provided theme families like Belize, and meet the latest, most comprehensive accessibility requirements.

Have you migrated themes in the past manually? Or have you already tried the “Migrate Theme” feature? Let me know in the comments how it went!