Light and Dark theme in SAP Analytics cloud (SAC)

[vignesh3027]

Objective: Implement theme switching in SAP Analytics Cloud using an optimized approach.

Solution: It is possible to implement by using Optimised Design Experience (ODE).

Dashboard

 These are the steps to achieve switching themes in SAP SAC.

1. Script variable
2. Theme preferences
3. Switch implement and onChange script
4. Story onInitalization script 

Step 1: 

• Create a script variable and set "light" as the default value

Step 2:

• Create two theme preferences, one for Light and another for Dark.

It allows you to define plenty of styling options for each widget and is much easier to use than CSS.

• To achieve the Light theme, the Background color for each widget should be Light grey color, select light theme as DEFAULT.
• For the dark theme, the background color for each widget should be light black.

Step 3:

• Create a switch component by Insert -> Filters/Controls -> Switch

• Set switch value data source type as "Script variables"

• Provide the ID Name for a switch component as "Switch_2"

Step 4:

• Once done with theme preferences, Now it is time to Script the logic
• It is necessary to script logic in switch's fx onChange() and story's onInitalization()

• Now in switch's fx onChange() , The script toggles between light and dark themes based on the current ThemeMode.

  1. If the theme is dark:

     • Switch to the light theme by using (Application.setTheme()). 
     • Application.setTheme()Click the Ctrl+space bar. It will allow you to choose the corresponding theme preferences automatically and fetch the theme ID.

theme selection

• I used Icons for both light and dark theme, Initially Hide DarkIcon and show LightIcon.

• The script toggles between light and dark themes based on the current ThemeMode.

  1. If the theme is dark:

     • Switch to light theme (Application.setTheme()).
     • Hide DarkIcon and show LightIcon.

  2. Otherwise (theme is light):

     • Switch to the dark theme.
     • Hide LightIcon and show DarkIcon.

  This ensures dynamic theme and icon adjustments based on user interaction.

• Code:
• if ( ThemeMode === "dark" )

  {

                  ThemeMode = "light";

                  Application.setTheme("369CEA6B9DC57C13BF5FA65BB646871C");

  DarkIcon.setVisible(false);

  LightIcon.setVisible(true);

  }

  else{

  Application.setTheme("DE00DBCBBDA02C61A64EF48759CF3E43");

                  ThemeMode = "dark";

  LightIcon.setVisible(false);

  DarkIcon.setVisible(true);

                  }

• Now in the Story's fx, select onInitialization() and The script initializes LightIcon as visible and DarkIcon as hidden. It then toggles their visibility based on the ON/OFF state of Switch_2.

• Code

DarkIcon.setVisible(false);

LightIcon.setVisible(true);

if( Switch_2.isOn() === true){

DarkIcon.setVisible(true);

LightIcon.setVisible(false);

} else{

LightIcon.setVisible(true);  

DarkIcon.setVisible(false);

}

Don't forget to Save the story and view it!

Hurraayyyy successfully implemented the Light and Dark theme in SAP Analytics Cloud (SAC) 😎.