Dashboard theme control using Toggle button and CSS Styling

Dashboard theme control using Toggle button and CSS Styling
Estimated read time 11 min read

Hi SAP community!

I’d like to present a solution to change the theme of a dashboard from Light UI to Dark UI using CSS styling in SAC.

Problem Statement:

If you are someone who prefers dark theme over the light theme you are not alone. But when developing dashboards, the customer might not feel the same way. So, in order to bring the best of both worlds, we need a control to switch between the different themes easily.

Solution:

I developed a small prototype that switches the theme from Light to dark in a click of a toggle button. 

In order to achieve this, we need to create a global CSS styling individually for Light and Dark themes. These CSS classes that we create in global styling will be then invoked accordingly based on the toggle button selection.

Prerequisites:

Basic Understanding of SACBeginner level understanding of JavaScriptIntermediate level understanding of CSS

Step 1: Create widgets in your page

In order to follow along the tutorial, create 2 Charts, a table, an input control and a text along with a button in your SAC story. I am using the sample model provided by SAP BestRunJuice_SampleModel for this blog.

Step 2: Understanding CSS classes

 Click the Edit CSS button

Story CSS

Within the Story CSS page, You will have access to all the various widgets within SAC and their supported CSS Classes. 

Various CSS options available for the SAC widgets

Utilizing CSS can leverage the way you could potentially design your SAC Dashboard. A CSS class can be applied to elements using the setcssclass function in SAC javascript. 

Currently SAC provides a list of predefined CSS classes that can be used readily for some widgets. Not all CSS styling options would be available; however, you can make use of the available ones. (Unfortunately Dropshadows and many other properties would not be available in SAC).

The Widget CSS class refers to the high-level CSS controls that are available for that particular widget type. Whereas .sap-custom-chart-title is a separate CSS class specifically designed to style the title of the chart. 

In our case, for ‘Chart’ Widget, we have the provision to control the various properties like background-color, border, border-top, border-right, border-bottom, border-left, opacity; etc.

In our case, for ‘Chart’ Widget, we can selectively affect the properties of the title like font-family, font-size, color; etc.

In Simple terms, the .sap-custom-chart-widget class controls the overall appearance of the chart (like background color and borders), the .sap-custom-chart-title class focuses on the text properties of the chart’s title.

Similarly there are many inbuilt CSS classes than can paired along with your original CSS class to enhance the styling of the widget., for eg:  .sap-custom-chart-subtitle, .sap-custom-chart-value-axis-label, .sap-custom-chart-legend

Great! Now that you understood what CSS classes are and how we can utilize them, let me show you how we can incorporate into our Story CSS page.

Step 3: Creating CSS classes for Light and Dark UI

The Idea is to create 2 separate palettes of CSS. One for light and One for Dark, Simple!

Let’s concentrate on one widget type at a time.
I have created a basic custom CSS class for a Chart. When this CSS class is called, it will turn the background of the chart widget Dark.

 

.Chart-BG-Dark
{
background-color: #3e3e3e; // Dark Grey
}

 

Now, once we have the dark background for our chart, we also need to make the corresponding texts (titles, Subtitles, Axis labels, values, Legends etc.) lighter so that it will be visible in the darker background.

We will make use of the available sub properties to do that.

 

.Chart-BG-Dark .sap-custom-chart-title
{
fill: #f5f5f5;
}

 

Similarly, we need to create CSS classes for the Subtitles and other text fields. Instead of repeating the same code there is a better way to do this.

Optimizing the code

However, one thing to keep in mind is that some CSS classes do not support some properties. When combining these classes with a property that is available in one and not available in another, it will not work. 

In such cases, you might have to maintain that code separately like the one which I’ve done below.

Before we step into the source code, let me clarify a few things. 

Make sure to create classes for Dark and Light theme.We require individual CSS classes for charts, tables and input controls.I have mostly used minimal properties such as background-color, color, fill for this demo.I have created more classes for Dark theme than light theme for the sake of simplicity.You can use other properties depending on your requirement.These classes will then be called in our toggle button switch.

Visual understanding of the CSS classes used

 Step 4: Source code

 

 

/* Light theme */
.Page-Color-Light
{
background-color: #eeeeee;
}
.Chart-BG-Light
{
background-color: #f5f5f5;
}
.Chart-BG-Light .sap-custom-chart-title
{
color: #3e3e3e;
}

.table-light
{
background-color: #f5f5f5;
}

.Title-Light .sap-custom-text
{
color: #3e3e3e;
}

/* Dark theme */
.Page-Color-Dark
{
background-color: #2f2f2f;
}

.Chart-BG-Dark
{
background-color: #3e3e3e;
}
.Chart-BG-Dark .sap-custom-chart-title, .Chart-BG-Dark .sap-custom-chart-subtitle
{
color: #f5f5f5;
}

.Chart-BG-Dark .sap-custom-chart-value-axis-label, .Chart-BG-Dark .sap-custom-chart-category-axis-label, .Chart-BG-Dark .sap-custom-chart-data-labels, .Chart-BG-Dark .sap-custom-chart-legend
{
fill: #f5f5f5;
}

.table-Dark
{
background-color: #3e3e3e;
}

.table-Dark .sap-custom-table-title,.table-Dark .sap-custom-table-subtitle, .table-Dark .sap-custom-table-data-cell, .table-Dark .sap-custom-table-dimension-header-cell, .table-Dark .sap-custom-table-dimension-member-cell, .table-Dark .sap-custom-table-dimension-member-expand-icon,
.table-Dark .sap-custom-table-data-cell
{
color: #f5f5f5;
}

.Title-Dark .sap-custom-text
{
color: #f5f5f5;
}

.IC-Dark .sap-custom-input-control-widget
{
background-color: #3e3e3e;
border: #4e4e4e;
}
.IC-Dark .sap-custom-input-control-main-label, .IC-Dark .sap-custom-input-control-sub-label
{
color: #f5f5f5;
}

.IC-Dark .sap-custom-input-control-arrow, .IC-Dark .sap-custom-input-control-icon
{
color: yellow;
}

 

Now create a toggle button in SAC and Enter the following script.

 

if(Switch_1.isOn())
{Page_4.setCssClass(“Page-Color-Dark”);
Chart_5.setCssClass(“Chart-BG-Dark”);
Chart_6.setCssClass(“Chart-BG-Dark”);
Table_3.setCssClass(“table-Dark”);
Text_1.setCssClass(“Title-Dark”);
InputControl_4.setCssClass(“IC-Dark”);
}
else
{
Page_4.setCssClass(“Page-Color-Light”);
Chart_5.setCssClass(“Chart-BG-Light”);
Chart_6.setCssClass(“Chart-BG-Light”);
Table_3.setCssClass(“table-Light”);
Text_1.setCssClass(“Title-Light”);
InputControl_4.setCssClass(“IC-Light”);
}

 

Now we would be able to toggle between light and dark theme based on the user Input.

Light UI:

Light theme

Dark UI:
Dark theme

Now tell me which Theme you liked the most in the comments below.
I hope this blog was helpful. Please do reach out to me in case of any trouble understanding the content.
Have a nice day. 

 

 

 

 

 

​ Hi SAP community!I’d like to present a solution to change the theme of a dashboard from Light UI to Dark UI using CSS styling in SAC. Problem Statement:If you are someone who prefers dark theme over the light theme you are not alone. But when developing dashboards, the customer might not feel the same way. So, in order to bring the best of both worlds, we need a control to switch between the different themes easily.Solution:I developed a small prototype that switches the theme from Light to dark in a click of a toggle button. In order to achieve this, we need to create a global CSS styling individually for Light and Dark themes. These CSS classes that we create in global styling will be then invoked accordingly based on the toggle button selection.Prerequisites:Basic Understanding of SACBeginner level understanding of JavaScriptIntermediate level understanding of CSSStep 1: Create widgets in your pageIn order to follow along the tutorial, create 2 Charts, a table, an input control and a text along with a button in your SAC story. I am using the sample model provided by SAP BestRunJuice_SampleModel for this blog.Step 2: Understanding CSS classes Click the Edit CSS buttonStory CSSWithin the Story CSS page, You will have access to all the various widgets within SAC and their supported CSS Classes. Various CSS options available for the SAC widgetsUtilizing CSS can leverage the way you could potentially design your SAC Dashboard. A CSS class can be applied to elements using the setcssclass function in SAC javascript. Currently SAC provides a list of predefined CSS classes that can be used readily for some widgets. Not all CSS styling options would be available; however, you can make use of the available ones. (Unfortunately Dropshadows and many other properties would not be available in SAC).The Widget CSS class refers to the high-level CSS controls that are available for that particular widget type. Whereas .sap-custom-chart-title is a separate CSS class specifically designed to style the title of the chart.  In our case, for ‘Chart’ Widget, we have the provision to control the various properties like background-color, border, border-top, border-right, border-bottom, border-left, opacity; etc.In our case, for ‘Chart’ Widget, we can selectively affect the properties of the title like font-family, font-size, color; etc.In Simple terms, the .sap-custom-chart-widget class controls the overall appearance of the chart (like background color and borders), the .sap-custom-chart-title class focuses on the text properties of the chart’s title.Similarly there are many inbuilt CSS classes than can paired along with your original CSS class to enhance the styling of the widget., for eg:  .sap-custom-chart-subtitle, .sap-custom-chart-value-axis-label, .sap-custom-chart-legendGreat! Now that you understood what CSS classes are and how we can utilize them, let me show you how we can incorporate into our Story CSS page.Step 3: Creating CSS classes for Light and Dark UIThe Idea is to create 2 separate palettes of CSS. One for light and One for Dark, Simple!Let’s concentrate on one widget type at a time.I have created a basic custom CSS class for a Chart. When this CSS class is called, it will turn the background of the chart widget Dark. .Chart-BG-Dark
{
background-color: #3e3e3e; // Dark Grey
} Now, once we have the dark background for our chart, we also need to make the corresponding texts (titles, Subtitles, Axis labels, values, Legends etc.) lighter so that it will be visible in the darker background.We will make use of the available sub properties to do that. .Chart-BG-Dark .sap-custom-chart-title
{
fill: #f5f5f5;
} Similarly, we need to create CSS classes for the Subtitles and other text fields. Instead of repeating the same code there is a better way to do this.Optimizing the codeHowever, one thing to keep in mind is that some CSS classes do not support some properties. When combining these classes with a property that is available in one and not available in another, it will not work. In such cases, you might have to maintain that code separately like the one which I’ve done below.Before we step into the source code, let me clarify a few things. Make sure to create classes for Dark and Light theme.We require individual CSS classes for charts, tables and input controls.I have mostly used minimal properties such as background-color, color, fill for this demo.I have created more classes for Dark theme than light theme for the sake of simplicity.You can use other properties depending on your requirement.These classes will then be called in our toggle button switch.Visual understanding of the CSS classes used Step 4: Source code  /* Light theme */
.Page-Color-Light
{
background-color: #eeeeee;
}
.Chart-BG-Light
{
background-color: #f5f5f5;
}
.Chart-BG-Light .sap-custom-chart-title
{
color: #3e3e3e;
}

.table-light
{
background-color: #f5f5f5;
}

.Title-Light .sap-custom-text
{
color: #3e3e3e;
}

/* Dark theme */
.Page-Color-Dark
{
background-color: #2f2f2f;
}

.Chart-BG-Dark
{
background-color: #3e3e3e;
}
.Chart-BG-Dark .sap-custom-chart-title, .Chart-BG-Dark .sap-custom-chart-subtitle
{
color: #f5f5f5;
}

.Chart-BG-Dark .sap-custom-chart-value-axis-label, .Chart-BG-Dark .sap-custom-chart-category-axis-label, .Chart-BG-Dark .sap-custom-chart-data-labels, .Chart-BG-Dark .sap-custom-chart-legend
{
fill: #f5f5f5;
}

.table-Dark
{
background-color: #3e3e3e;
}

.table-Dark .sap-custom-table-title,.table-Dark .sap-custom-table-subtitle, .table-Dark .sap-custom-table-data-cell, .table-Dark .sap-custom-table-dimension-header-cell, .table-Dark .sap-custom-table-dimension-member-cell, .table-Dark .sap-custom-table-dimension-member-expand-icon,
.table-Dark .sap-custom-table-data-cell
{
color: #f5f5f5;
}

.Title-Dark .sap-custom-text
{
color: #f5f5f5;
}

.IC-Dark .sap-custom-input-control-widget
{
background-color: #3e3e3e;
border: #4e4e4e;
}
.IC-Dark .sap-custom-input-control-main-label, .IC-Dark .sap-custom-input-control-sub-label
{
color: #f5f5f5;
}

.IC-Dark .sap-custom-input-control-arrow, .IC-Dark .sap-custom-input-control-icon
{
color: yellow;
} Now create a toggle button in SAC and Enter the following script. if(Switch_1.isOn())
{Page_4.setCssClass(“Page-Color-Dark”);
Chart_5.setCssClass(“Chart-BG-Dark”);
Chart_6.setCssClass(“Chart-BG-Dark”);
Table_3.setCssClass(“table-Dark”);
Text_1.setCssClass(“Title-Dark”);
InputControl_4.setCssClass(“IC-Dark”);
}
else
{
Page_4.setCssClass(“Page-Color-Light”);
Chart_5.setCssClass(“Chart-BG-Light”);
Chart_6.setCssClass(“Chart-BG-Light”);
Table_3.setCssClass(“table-Light”);
Text_1.setCssClass(“Title-Light”);
InputControl_4.setCssClass(“IC-Light”);
} Now we would be able to toggle between light and dark theme based on the user Input.Light UI:Light themeDark UI:Dark themeNow tell me which Theme you liked the most in the comments below.I hope this blog was helpful. Please do reach out to me in case of any trouble understanding the content.Have a nice day.        Read More Technology Blogs by Members articles 

#SAP

#SAPTechnologyblog

Avatar for

You May Also Like

More From Author