Light and Dark theme in SAP Analytics cloud (SAC)

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

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

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

Script variableTheme preferencesSwitch implement and onChange scriptStory 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 to define plenty of styling options for each widget, and it is much easier to use than defining CSS.

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

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 logicIt 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.

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.I used Icons for light and dark theme, Initially Hide DarkIcon and show LightIcon.

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:

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

Dont forget to Save the story and view !

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

​ Objective: Implement theme switching in SAP Analytics Cloud using an optimized approach.Solution: It is possible to implement by using Optimised Design Experience (ODE). These are the overview of the steps to achieve switching themes in SAP SAC.Script variableTheme preferencesSwitch implement and onChange scriptStory onInitalization script  Step 1: Create a script variable and set “light” as the default valueStep 2:Create two theme preferences, one for Light and another for Dark.It allows to define plenty of styling options for each widget, and it is much easier to use than defining CSS. To achieve the Light theme, the Background color for each widget should be Light grey color, select light theme as DEFAULT.the Dark theme, the Background color for each widget should be Light black color.Step 3:Create a switch component by Insert -> Filters/Controls -> SwitchSet 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 logicIt 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.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.I used Icons for light and dark theme, Initially Hide DarkIcon and show LightIcon.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.CodeDarkIcon.setVisible(false);LightIcon.setVisible(true);  if( Switch_2.isOn() === true){DarkIcon.setVisible(true);LightIcon.setVisible(false);} else{LightIcon.setVisible(true);  DarkIcon.setVisible(false);}Dont forget to Save the story and view !Hurraayyyy successfully implemented the Light and Dark theme in SAP Analytics Cloud (SAC) 😎.          Read More Technology Blogs by Members articles 

#SAP

#SAPTechnologyblog