UI Improvement: Include Dark Mode

[jonnitto]

It would be nice if the UI would support dark mode:

@media (prefers-color-scheme: dark) {

}

[jeffersantoss]

Any updates on this topic? Would be nice the dark mode...

[joshmedeski]

Hey guys, I'd recommend a tool like https://nighteye.app/ if you want something working immediately. It works well for me.

[imme-emosol]

MailHog uses Mailhog-UI which mainly depends on bootstrap's styling.
The progress of their dark-mode implementation can be tracked at twbs/bootstrap#27514 .

Currently mailhog does not seem to support overriding (or adding) stylesheets into the page from a docker-compose / docker run.

A "less clean" solution could be for mailhog to add/override the style.css with something like:
<link rel="stylesheet" href="css/colors.reset.css">

* {
    color: unset !important;
    background-color: unset !important;
    border-color: unset !important;
}

Which should result in the colors set in the browser defaults.
Many times though, the browser default coloring is colored in a bright color-scheme/-palette.

---

To provide a dark colored theme would require more work than just putting this (and more) after the other stylesheets:
<link rel="stylesheet" media="screen and (prefers-color-scheme: dark)" href="css/colors.dark.css">

/* A manual set of color styles for the bootstrap components used by mailhog */

/* bootstrap-3.3.2.min.css overrides */
body {
        color: #bbb;
        background-color: #333;
}

.form-control {
        color: #aaa;
        background-color: #000;
}

.navbar-default {
        background-color: #222;
        border-color: #666;
}

.well {
        background-color: #222;
        border: 1px solid #666;
}

[adpe]

This issue should be tracked within this repository https://github.com/mailhog/MailHog-UI