metabase_dark_mode.md

Intro

Metabase is a dashboard to visualize a database, which is cool, but has no dark mode in its free version,
only in pro and enterprice and let's face it, you're not gonna pay money just to have a different color on an app.

Dark mode for free

To get a free dark mode on this app (in my case, the app is being served as a docker container) you can do a little css hackery
to invert the app's colors.

For this you'll need way to set custom css for websites in your browser.
I use (User JavaScript and CSS)[https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld], which is a chrome extension

The css

To invert the colors of the app on your client, paste this into the css overwrite window of your extension:

html {
    filter: invert(0.9) hue-rotate(180deg);
    background-color: black !important; /* Ensures a dark background */
}
img, video, iframe {
    filter: invert(1) hue-rotate(180deg);
}

• invert(...) controls the degree of inversion
• hue-rotate(...) controls if and how much the colors should be shifted (e.g. turn a blue app into a green one)