Dark Mode
If you are looking for dark mode (either dynamically in embedded form or directly), you can use the following CSS as a starting point (pass in as a file into the embed code or apply this at the customer level Custom HTML/JS or at the dashboard):
<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;
}
div.body.ui-droppable {
background: #333 !important;
}
</style>
-
Another approach:
<style>
html {
background: #000;
filter: invert(1) hue-rotate(180deg)
}
img,video,iframe,canvas,svg {
filter: invert(1) hue-rotate(180deg);
}
</style>
Please sign in to leave a comment.
1 comment