diff --git a/Dockerfile b/Dockerfile index a9e5822b8..bf953779a 100644 --- a/Dockerfile +++ b/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"] diff --git a/docs/CONFIGURATION.md b/docs/CONFIGURATION.md index c28b8a16d..e1bb72679 100644 --- a/docs/CONFIGURATION.md +++ b/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` diff --git a/docs/dark.css b/docs/dark.css new file mode 100644 index 000000000..572954638 --- /dev/null +++ b/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; +}