feat(ui): add an example dark.css theme file

Dockerfile

@@ -10,6 +10,7 @@ RUN apk add --update make git
 RUN CGO_ENABLED=0 make -C /go/src/github.com/prymitive/karma VERSION="${VERSION:-dev}" karma
 
 FROM gcr.io/distroless/base
+COPY ./docs/dark.css /themes/dark.css
 COPY --from=go-builder /go/src/github.com/prymitive/karma/karma /karma
 EXPOSE 8080
 ENTRYPOINT ["/karma"]

docs/CONFIGURATION.md

@@ -491,6 +491,14 @@ custom:
 Use at your own risk and be aware that used CSS class names might change without
 warning. This feature is provided as is without any guarantees.
 
+There is an example `dark.css` file providing a dark theme. It's included in the
+docker image as `/themes/dark.css` and can be enabled by passing environment
+variable via docker:
+
+```shell
+-e CUSTOM_CSS=/themes/dark.css
+```
+
 ## Command line flags
 
 Config file options are mapped to command line flags, so `alertmanager:interval`

docs/dark.css

@@ -0,0 +1,43 @@
+/* Example dark theme */
+
+body,
+.bg-primary-transparent {
+  background-color: #2e2727 !important;
+}
+
+.card,
+.list-group-item,
+.dropdown-menu,
+.modal-content {
+  background-color: #455a64 !important;
+}
+
+.input-group-text,
+.components-filterinput {
+  background-color: #455a64 !important;
+}
+
+.components-grid-annotation {
+  background-color: #95a5a6 !important;
+}
+
+.badge:not(.components-label-bright),
+.form-group > label,
+.nav-link {
+  color: #ccc !important;
+}
+
+.nav > .nav-link {
+  color: #ccc !important;
+}
+
+.nav > .nav-link.active,
+.nav-item > .nav-link.active {
+  color: #fff !important;
+  background-color: #455a64 !important;
+}
+
+.badge.badge-light {
+  color: #666;
+  background-color: #444;
+}