how to change apache superset's chart's background color?

Question

Per How to Change Apache Superset Template from the Superset User Interface? , I was able to change the CSS template for Superset dashboard. But the charts inside the dashboard are not affected. e.g. most of the charts have white colored background(e.g. Piechart) and some people dislike it. How to change the chart background color? I mean change it for all charts or for one chart.

Answer 1

Disclaimer: This should work, but is a bit hacky and could have long-term support implications:

I've been fiddling with a "dark mode" dashboard just to kick the tires on this. Here's a screenshot just for fun:

So... what did I do?

1. Click "Edit Dashboard" in the top right of your screenshot
2. When in edit mode, the top right menu has an option to "Edit CSS"
3. Use your browser's inspector to hack away! That said, here are a couple of key ingredients:
   • .dashboard-component{ background: whatever} - sets the main background of each viz card, but you'll still see many components still have white backgrounds within these wrappers.
   • .slice_container svg{ background-color: transparent !important; } - this overrides the white background of the components I ran into (including Pie charts!).

If viz components use SVG you can get pretty clever with inspecting/overriding various bits. A couple of gotchas with the above:

1. If a viz component contains multiple SVG elements, this may have side effects.
2. If a viz uses canvas instead of svg you will run into more trouble

In the worst case scenario, you may need to check out the superset-ui-plugins repo and make tweaks. This dev process isn't super straightforward, but some of us are working to improve that.

Answer 2

Easiest solution for me is using dark reader extension.