Dashboard - Introduce an option to easily colorize dashboard using custom colors

[JaneSjs]

T16054 - Changing the background color of a graph
https://surveyjs.answerdesk.io/internal/ticket/details/T16054

---

In the meantime, the overall Dashboard look can be customized from different places.

• A background of a dashboard's container defines the background of the container.

<div style="background: #1f2420" #surveyVizPanel></div>

• The VisualizationPanel's backgroundColor property defines the background of certain charts.

vizPanel.backgroundColor = "gray";

• The VisualizerBase.customColors setting defines the colors of bars within charts.

VisualizerBase.customColors = [
  "#f3cec9",
  "#e7a4b6",
  "#cd7eaf",
  "#a262a9",
  "#6f4d96",
  "#3d3b72",
  "#182844",
  "#6f4d96",
  "#3d3b72",
  "#182844",
];

• To define colors of charts, it is necessary to specify the plot_bgcolor and paper_bgcolor colors within the onPlotCreating event.

PlotlySetup.onPlotCreating.add((model, options) => {
  options.layout.plot_bgcolor = "gray";
  options.layout.paper_bgcolor = "gray";
});

• Additionally, define the sa-question__content background color.

.sa-question__content {
  background: gray !important;
}

• To colorize toolbar items, it is necessary to apply additional style customization.

.sa-question__select-wrapper .sa-question__select {
  background: gray !important;
  border-color: gray !important;
}

As a result, we can achieve a dark mode for a dashboard: View Demo.

Provided the complexity of Dashboard appearance customization, I would suggest considering creating a kind of a theming mechanism which would allow developers to modify the appearance of a dashboard with ease.

[AndOne1974]

+1

[JaneSjs]

+1 T24464 - Custom styles for dashboard
https://surveyjs.answerdesk.io/internal/ticket/details/T24464