Applying Gradient Color Backgrounds to Dashboards | Bold BI

Customizing Theme for Gradient Backgrounds

To set a gradient color background for your dashboard and widgets, you will need to modify the theme file. This involves altering specific variable color codes.

Steps to Modify Theme File:

1. Locate your customized theme file.
2. Open the theme file for editing.
3. Find the variable --designer-viewer-background-color.
4. Set the value of --designer-viewer-background-color to your desired gradient using the CSS linear-gradient function.
5. Change the --widget-primary-background variable to transparent.

Example Code:

--designer-viewer-background-color: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
--widget-primary-background: transparent;

By setting the --designer-viewer-background-color to a linear gradient, you can create a smooth transition between multiple colors. The --widget-primary-background set to transparent ensures that the gradient is visible through the widgets.

Visual Reference

For a better understanding of how the gradient will appear, please refer to the image provided below.

Additional References

For more information on customizing themes in Bold BI, please visit the following resources:

• Bold BI Documentation: Customizing Themes
• CSS Gradient Backgrounds

Remember to save your changes and refresh your dashboard to see the gradient background in action. If you encounter any issues or require further assistance, please consult the Bold BI support documentation or contact the support team.