I like my FireBrick network contraption.

I also like a dark UI.

The FireBrick’s web UI does not have a dark mode option, but it does have the ability to load a remote css file.

This is the css-url parameter.

If you are using the web editor, it is Edit / Setup / General System Services / Web server settings / Show all (to show additional attributes), and finally css-url.

If you prefer the xml editor, it is a setting within the http configuration:

css-url="https://neilzone.co.uk/firebrick.css"

I went for a very basic “invert what is there” approach:

@media (prefers-color-scheme: dark) {
  html {
    filter: invert(1) hue-rotate(180deg);
  }

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

It’s not perfect - it leaves a slightly pink UI in places - but it is definitely darker than the normal UI.

Update: doing it locally

Mini made a very useful comment in the fediverse:

you can minify this and turn it into a data uri to remove the external server dependency (and I hope mastodon doesn’t eat this!)

css-url="data:text/css;base64,QG1lZGlhIChwcmVmZXJzLWNvbG9yLXNjaGVtZTpkYXJrKXtodG1se2ZpbHRlcjppbnZlcnQoMSkgaHVlLXJvdGF0ZSgxODBkZWcpfWh0bWwgaW1ne2ZpbHRlcjppbnZlcnQoMSkgaHVlLXJvdGF0ZSgxODBkZWcpfX0="

I did this by writing a firebrick.css file, and then running it through

echo "css-url=\"data:text/css;base64,$(yuicompressor firebrick.css | base64)\""