How to Easily Switch Themes in SAP Analytics Cloud Stories (Light and Dark Mode)

Manually switching themes in a story is common in SAP Analytics Cloud, but did you know you can add a toggle switch to seamlessly switch between themes, such as light and dark modes? This feature allows users to personalize their stories to better suit their preferences. 

Step-by-Step Guide to Adding a Theme Toggle Switch

Step 1: Add a Switch to Your Story To start, add a toggle switch to your story. This will act as the trigger for switching between themes.

Step 2: Add the Script Add the following (or similar) script to the switch. Don't worry about filling in the variables yet—we’ll guide you through finding the correct theme IDs: 

Step 3: Locate Your Theme IDs The script for this functionality is very simple, but theme IDs are not as easily accessible as story IDs in SAP Analytics Cloud, so you'll need to use the browser's console "Network" tab to locate them. 

Locate Your Themes

1. Open the folder containing your themes in your SAP Analytics Cloud tenant.

2. Open your browser’s developer tools (usually accessible via F12 or right-click > Inspect).

3. Navigate to the Network tab.

Every time you click on the page, the Network tab will populate with new information. By clicking on one of the themes in the folder, you will see your Network tab update. 

This process may seem overwhelming at first, but there’s no need to manually sift through every item to find your theme ID. After opening your theme and allowing the Network tab to populate, simply click on the last item in the list. This will highlight the most recently loaded entry, which we’ll use as a reference point. 

Step 4: Confirm Theme Selection in the Network Tab After selecting this item and seeing that it is highlighted in the console, close your theme preferences window on the webpage. If closing the window adds anymore items to your Network tab, make sure you click the most recent one so that you still have a place holder: 

Step 5: Reopen the Theme to Refresh the Network Tab

Reopen your theme on your webpage. This should populate the Network tab with significantly fewer new items, as shown below: 

Step 6: Select the Content Library Entry

Find the entry that starts with "contentlib" in the Network tab.

1. Scroll to the top of its contents to locate the resourceID field.

2. Confirm the ID by checking the resource type and theme name.

After finding your first theme ID, you need to go through the same process for your second theme. 

Step 7: Update the Script

Now that we have both theme IDs, let’s return to the script for the switch. Make sure to populate the variables with your chosen theme IDs. 

Step 8: Test the Script

With the script updated, you can now use the toggle to switch between themes directly in your story. Feel free to add whatever text you would like next to the switch to help users: 

Light mode: 

Dark Mode:

With just a few simple steps, you can easily add a toggle switch to your SAP Analytics Cloud stories, allowing users to seamlessly switch between light and dark modes. This feature not only enhances the user experience but also adds a personalized touch to your stories. Try it out today and let us know how it improves your SAP Analytics Cloud journey!