Dynamic Theme Change in SAP UI5 Applications.

[RanishreeBV25]

Hi Everyone,

I’m excited to share a blog on a topic that’s both practical and increasingly important in modern application development: Dynamic Theme Change in SAP UI5 Applications.

In today’s digital landscape, user experience plays a crucial role in the success of any application. One of the key aspects of a great user experience is personalization—allowing users to customize the look and feel of the application to suit their preferences. A common feature that users expect is the ability to switch between Light and Dark modes seamlessly.

In this blog, I’ll walk you through a step-by-step guide on how to implement dynamic theme switching in your SAP UI5 applications. Whether you’re building a new app or enhancing an existing one, this feature will not only improve usability but also make your application more accessible and visually appealing.

We’ll cover:

• Why dynamic theme switching matters and its benefits.
• How to implement it using Toggle Buttons, JSON Models, and dynamic updates.
• Best practices to ensure a smooth and user-friendly experience.

By the end of this blog, you’ll have a clear understanding of how to add this feature to your UI5 applications and make them more engaging for your users.

Let’s dive in!

Why Dynamic Theme Switching?

Before we jump into the implementation, let’s take a moment to understand why dynamic theme switching is important:

1. User Preference: Some users prefer Light mode during the day and Dark mode at night to reduce eye strain.
2. Accessibility: Dark mode can improve readability for users with visual impairments.
3. Modern Design: Supporting Light and Dark modes aligns your application with modern design trends and enhances its overall appeal.

Prerequisites

To follow along with this guide, you’ll need:

• Basic knowledge of SAP UI5.
• A running SAP UI5 project (you can create one using SAP Business Application Studio or any IDE).
• Familiarity with JavaScript and XML views.

Step-by-Step Implementation

Now, let’s get into the implementation. We’ll break it down into simple steps:

1. Setting Up the Project

If you don’t already have a UI5 project, create one using SAP Business Application Studio or your preferred IDE. For this blog, we’ll assume you have a basic project ready.

1. Adding a Toggle Button for Theme Switching

The first step is to add a Toggle Button to your UI. This button will allow users to switch between Light and Dark modes.

 <ToggleButton
                id="toggleButton"
                icon="sap-icon://light-mode" 
                pressed="false"
                press=".onThemeSwitch"
                width="50px"
                class="sapUiSmallMargin"/>

     2. Implementing Dynamic Theme Switching

Next, we’ll add the logic to handle theme switching in the controller. We’ll use the sap.ui.getCore().applyTheme() method to dynamically change the theme.

onThemeSwitch: function (oEvent) {
            const oToggleButton = oEvent.getSource();
            const bIsDarkMode = oToggleButton.getPressed();
            const sNewTheme = bIsDarkMode ? "sap_horizon_dark" : "sap_horizon";
            sap.ui.getCore().applyTheme(sNewTheme);
            oToggleButton.setIcon(bIsDarkMode ? "sap-icon://dark-mode" : "sap-icon://light-mode");
            const oPage = this.byId("page"); 
            oPage.setTitle(bIsDarkMode ? "Dark Mode" : "Light Mode");
            MessageToast.show(`Switched to ${bIsDarkMode ? "Dark" : "Light"} Mode`);
        }

    3. Updating the Page Title, Toggle Button Icons and Button Title Dynamically

To make the UI more intuitive, we’ll update the Page title, Button Icons and Button title dynamically based on the selected theme.

sap.ui.getCore().applyTheme("sap_horizon");
            this.getView().attachAfterInit(function () {
                const oToggleButton = this.byId("toggleButton");
                const oPage = this.byId("page"); 
                const sCurrentTheme = sap.ui.getCore().getConfiguration().getTheme();
                const bIsDarkMode = sCurrentTheme.includes("dark");
                oToggleButton.setPressed(bIsDarkMode);
                oToggleButton.setIcon(bIsDarkMode ? "sap-icon://dark-mode" : "sap-icon://light-mode");
                oPage.setTitle(bIsDarkMode ? "Dark Mode" : "Light Mode");
            }.bind(this));

    4. Binding JSON Models to Tables

Finally, we’ll bind a JSON Model to a table to display some sample data. This will demonstrate how the theme change affects the entire application, including data tables.

const oData = {
                employees: [
                    { id: "001", name: "Ranishree", age: 24, city: "Mandya", salary: 27000 },
                    { id: "002", name: "John Doe", age: 30, city: "New York", salary: 50000 },
                    { id: "003", name: "Jane Smith", age: 28, city: "London", salary: 45000 },
                    { id: "004", name: "Alice Johnson", age: 35, city: "Berlin", salary: 60000 }
                ]
            };
            const oModel = new JSONModel(oData);
            this.getView().setModel(oModel, "employeesModel");

<Table items="{employeesModel>/employees}">
    <columns>
        <Column><Text text="Id"/></Column>
        <Column><Text text="Name"/></Column>
        <Column><Text text="Age"/></Column>
        <Column><Text text="City"/></Column>
        <Column><Text text="Salary"/></Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <Text text="{employeesModel>id}"/>
                <Text text="{employeesModel>name}"/>
                <Text text="{employeesModel>age}"/>
                <Text text="{employeesModel>city}"/>
                <Text text="{employeesModel>salary}"/>
            </cells>
        </ColumnListItem>
    </items>
</Table>

The Output will be

Best Practices

Here are some tips to ensure a smooth implementation:

1. Add Icons: Use icons like sap-icon://lightbulb for Light mode and sap-icon://moon for Dark mode to make the Toggle Button more intuitive.
2. Test Thoroughly: Ensure your application looks great and functions well in both Light and Dark modes.

Conclusion

Dynamic theme switching is a simple yet powerful feature that can significantly enhance the user experience of your SAP UI5 applications. By following the steps outlined in this blog, you can easily implement this feature and make your applications more engaging and accessible.

I hope you found this guide helpful! If you have any questions or feedback, feel free to leave a comment below. Happy coding!