Company-wide styles

Hello!

Can I set a default color palette for all dashboards/charts?

4 comments

Official comment

Brigham Berry September 21, 2021 17:14

Hi there,

You can set default styling for your dashboards in User Settings -> Customer settings and adding html into the global header or footer. Here is a demonstration: https://www.loom.com/share/0e96260cb48243af90b0ae1a15f828c7

Comment actions Permalink

Brigham Berry September 21, 2021 19:32

Try out dark mode by pasting the following code into your global header/footer or in dashboard settings custom CSS

https://www.loom.com/share/1c4d5d0ca3234bae91aa4be33d6508ca

<style>
ul#grid-widgets {
background: #333 !important;
}
ul#grid-widgets *,
.dash-header-row,
.dash-header-row *{
background: #333 !important;
background-color: #333 !important;
color: white !important;
}
ul#grid-widgets .header {
  border-radius: 0;
  border-bottom: 1px solid white;
}
ul#grid-widgets li svg {
fill: #333 !important;
}
ul#grid-widgets li svg rect.highcharts-background {
fill: #333 !important;
}
ul#grid-widgets li svg rect[fill="#fff"] {
fill: #333 !important;
}
ul#grid-widgets li svg g path[fill="#ffffff"] {
fill: #333333 !important;
}
ul#grid-widgets li svg text {
fill: #fff !important;
}
ul#grid-widgets .gs-resize-handle,
ul#grid-widgets .gs-w.dragging .gs-resize-handle {
opacity: 0 !important;
}
ul#grid-widgets li table tbody tr[section="header"],
ul#grid-widgets li table tbody tr[section="header"] {
background: #444 !important;
}
ul#grid-widgets .filter-picker-container .filter-picker-item, 
ul#grid-widgets .filter-picker-container .filter-set-picker-item,
ul#grid-widgets .filter-picker-container .filter-picker-item *, 
ul#grid-widgets .filter-picker-container .filter-set-picker-item *{
  background: #555 !important;
}
ul#grid-widgets .highcharts-label.highcharts-tooltip * {
	background: #777 !important;
}
ul#grid-widgets .highcharts-label.highcharts-tooltip path {
  fill: #777 !important;
}
ul#grid-widgets .highcharts-text-outline {
	stroke-width: 0.5px !important;
}

div.body.ui-droppable {
background: #333 !important;
}
</style>

Gonzalo Perez Farina September 21, 2021 20:01

Thanks a lot Brig!

Yeah that global header option is what I was looking for :)

0

Comment actions Permalink
Gonzalo Perez Farina September 21, 2021 20:56

Sorry Brig, but I saw that none of this changes the actual color of the bars (which by default is light blue). Do you know how to do that?

I understand I should add in that custom CSS something like :

- Color 1 should always be X

- Color 2 should be Y

- Color 3 should be Z

...

0

Comment actions Permalink

Please sign in to leave a comment.