Switching between themes is very often  part of modern applications. Especially switching to a dark mode becomes a common feature, that would also be a „nice to have“ in SAP Analytics Cloud Applications. This blog describes how to switch themes in a SAP Analytics Cloud Application and what you should be aware of while developing.

There is already a very good blog post concerning switching a theme with the help of CSS (https://blogs.sap.com/2021/02/04/welcome-to-the-dark-side-of-analytics-enabling-dark-mode-using-cascading-style-sheets-in-sap-analytics-cloud-analytics-designer/). In contrast to that we try to use common themes and reduce usage of CSS.

Implementation

We already have a small Sales Planning Application implemented in SAP Analytics Cloud with BPC Live Connection. Application looks like the following image:

Application is linked to a theme that nearly styles every component of the application. Application CSS is only used in exceptional cases and should be avoided.

The header is designed by using background image called PAN_HEADER_IMG1_LIGHT.

Implement Switch Element

To enable a switch, we created a Switch element on the top called PAN_HEADER_SWITCH_01.

Within the on-change function, we implemented the following coding to switch themes:

if ( ThemeMode === „dark“ )
{
                ThemeMode = „light“ ;
                PAN_HEADER_IMG1_LIGHT.setVisible(true);
                PAN_HEADER_IMG1_DARK.setVisible(false);
                Application.setTheme(„440855848CD99CE15AF5463F2B2C6F77“);
                PAN_MAIN_TAB1_TABLE.setCssClass(„light-theme“);
}
 else{
                Application.setTheme(„58B065848CDA84AEBF1D8171D93972F0“);
                PAN_MAIN_TAB1_TABLE.setCssClass(„dark-theme“);
                PAN_HEADER_IMG1_LIGHT.setVisible(false);
                PAN_HEADER_IMG1_DARK.setVisible(true);
                ThemeMode = „dark“;
                }

Steering the switch function

ThemeMode is a Script Variable, which sets the default value and tracks changes. It controls the switch and can be used, by other functions, to read the theme state. It is set to the current mode.

Switch theme

Application.setTheme is the main function which allows you to switch themes within your application. To use that function the ThemeId is needed. I could not find the ThemeId easily but finally I spotted it with the help of Google Development Tools in the network tab when opening the theme for change. The Request payload includes the RessourceID in that case ThemeId.

A second theme needs to be created with the style for the dark theme. This will be handled later.

Hide and Show elements

Switch header background image is another step executed simultaneously to the theme switcht to reduce loading times, a dark image object PAN_HEADER_IMG1_DARK was already created and set as hidden initially.

While switching the theme, the light background will be set to invisible and the dark image appears in front.

PAN_HEADER_IMG1_LIGHT.setVisible(false);
PAN_HEADER_IMG1_DARK.setVisible(true);

Switch CSS

In some cases, a switch to a CSS class with the help of .setCssClass is needed. Especially when the theme does not cope with the design option you need.

In our case we have to set the color for “Color Fill for Editable Cells” with the help of the CSS Class name light-theme. So, we enhanced the Application CSS with 2 styles, one for the light-theme and one for the dark theme.

.light-theme .sap-custom-table-editable-cell{
           background-color: #f0faf6;
}
.dark-theme .sap-custom-table-editable-cell{
           background-color: #8888;
           color: #ffffff;
}

During switch, we then set the CSS class correspondingly like PAN_MAIN_TAB1_TABLE.setCssClass(„dark-theme“).

Implement a dark theme

Cleanup Application

Set your elements back to theme preferences whenever it is possible. In the upper right corner of most of the elements you will find a button helping you with that task.

Create dark theme

Now copy your existing theme and select it within the application. There are 2 ways doing this. First, copy the theme in My Files area with the “Copy To” function.

Second, you can save the Theme with the “Save as” function with the application.

Design dark mode

Now switch to dark mode within your application and start to adopt the theme to dark mode. Your changes within the theme are immediately shown while design time.

Conclusion

When switching the theme, you can move your SAP Analytics Cloud Application to a next level. The theme approach enables you to create your style with nearly a “WYSIWYG” support. Furthermore, you can use the same style sheets and functions for multiple applications.

Your toolset consists of

• Changes in the themes
• Hide and show elements
• Adopt CSS Class

During implementation it is very important to try to use only CSS in exceptional cases.

The result of our implementation looks like this: