Dark Theme?

[amancevice]

It would be nice if superset supported a 'dark' theme out of the box so that the app and its dashboards can easily be dimmed without writing a very extensive custom CSS.

[visshaljagtap]

Yes it will be helpful and also it would be great if we have custom theme option.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. For admin, please label this issue .pinned to prevent stale bot from closing the issue.

[agabardo]

Any news on this?

[visakhmurukes]

Any updates on this?
Would be a great addition to have this

[leon-do]

bump?

[visakhmurukes]

I ended up adding a custom CSS for the dashboard.
All except table looks fine at the moment

[anjana-s-sajeevan]

which css file ? can you give me path ?

[Ci303]

I'd love to see this too. I use Dark Reader at the moment which did a pretty good job but doesn't handle the legend on charts very well.

[DrissiReda]

@visakhmurukes could you please share that custom CSS

[visakhmurukes]

@DrissiReda here you go

Looks like its modifying code when pasted
Please find it attached
dark.txt

[DrissiReda]

Thanks! any way that can be added to the whole superset ui?

[eugeniamz]

@junlincc FYI

[scimas]

bump

[junlincc]

Reopening and it's pinned.

[suddjian]

This is definitely being worked towards as Superset's component styles are switched to Emotion, but it will be quite a bit of work to get there. Relevant: #9123

[av-2024]

Any update on this since #9123 is merged?

[suddjian]

9123 is a proposal, not a PR. The actual change is composed of many PRs.

[opensourcefan]

Just adding it to my wish list. This huge wall of white hurts my eyes.

[niksat3]

Previously I had a hard time on changing the legend label color, since it came inside the canvas and as we know, we can't change what's inside canvas by CSS.

Turns out I found the solution by using the filter: invert(100%); function from CSS which can invert every color inside the html element. Here's the CSS that I use:

/*inspect your dashboard element and change it according to your div class name*/
.css-1bj6btm {
  filter: invert(100%);
}
.dashboard-content {
  background-color: white;
}
.open {
  background-color: white;
}

[greetclock]

The solution proposed by niksat3 works for us but it's still very rough. We would be happy to see Superset supporting any dark theme. We embed the dashboard to our frontend app and we try our best to match our brand's color scheme.

[ddnomad]

This would be nice

[Ci303]

Adding a +1 to this :)

[natilehrer]

Also, would be happy to see this

[kumarVikram56]

As a Software Engineer, I would love see Dark mode.
adding +1 :)

[dustin-liu-bgl]

bump

[sandeepr43]

Adding a +1 to this !

[vanoMekantsishvili]

+1 from my side as well :)

[eran-medan]

This ChatGPT suggestion was the only one that remotely looked ok ;)

:root {
  filter: invert(1) hue-rotate(180deg);
}

[d-Rickyy-b]

Browser add-ons such as "Dark Reader" or "Midnight Lizard" also work great. A native dark mode would be much appreciated though.

[sadeq-qafari]

+1