Add Dark Mode Toggle With Persisted Preference

Makefile

@@ -5,10 +5,10 @@ ui:
 
 bindata: bindata-deps
 	-rm assets/assets.go
-	go-bindata -o assets/assets.go -pkg assets assets/...
+	$(shell go env GOPATH)/bin/go-bindata -o assets/assets.go -pkg assets assets/...
 
 bindata-deps:
-	go get github.com/jteeuwen/go-bindata/...
+	go install github.com/jteeuwen/go-bindata/...@latest
 
 fmt:
 	go fmt ./...

assets/css/style.css

@@ -128,9 +128,14 @@
 
 /***********/
 /* Preview */
-#preview-plain, #preview-source {
+#preview-plain,
+#preview-source {
   white-space: pre;
-  font-family: Courier New, Courier, System, fixed-width;
+  font-family:
+    Courier New,
+    Courier,
+    System,
+    fixed-width;
   padding: 10px;
 }
 
@@ -153,10 +158,169 @@
   font-weight: normal;
 }
 
-.haeders table td, .headers table th {
-  padding: 2px 10px
+.haeders table td,
+.headers table th {
+  padding: 2px 10px;
 }
 
 .mime-part {
   padding: 10px;
 }
+
+/**************/
+/* Dark theme */
+body.theme-dark {
+  background-color: #0f141a;
+  color: #e6e9ee;
+}
+
+body.theme-dark a {
+  color: #8ab4f8;
+}
+
+body.theme-dark a:hover,
+body.theme-dark a:focus {
+  color: #b3d1ff;
+}
+
+body.theme-dark .navbar-default {
+  background-color: #151b22;
+  border-color: #22303d;
+}
+
+body.theme-dark .navbar-default .navbar-brand,
+body.theme-dark .navbar-default .navbar-nav > li > a {
+  color: #d6dbe0;
+}
+
+body.theme-dark .navbar-default .navbar-brand:hover,
+body.theme-dark .navbar-default .navbar-nav > li > a:hover,
+body.theme-dark .navbar-default .navbar-nav > li > a:focus {
+  color: #ffffff;
+}
+
+body.theme-dark .left-inner-addon .glyphicon {
+  color: #8a96a3;
+}
+
+body.theme-dark .well {
+  background-color: #141b22;
+  border-color: #22303d;
+  color: #d6dbe0;
+}
+
+body.theme-dark .btn-default {
+  background-color: #1b2430;
+  border-color: #2a3a4b;
+  color: #d6dbe0;
+}
+
+body.theme-dark .btn-default:hover,
+body.theme-dark .btn-default:focus {
+  background-color: #223041;
+  color: #ffffff;
+}
+
+body.theme-dark .btn-danger {
+  background-color: #a83b3b;
+  border-color: #b94b4b;
+}
+
+body.theme-dark .toolbar {
+  border-bottom: 1px solid #22303d;
+}
+
+body.theme-dark .msglist-message {
+  border-bottom: 1px solid #22303d;
+}
+
+body.theme-dark .msglist-message:hover {
+  background-color: #131a22;
+}
+
+body.theme-dark .msglist-message .subject.unread {
+  color: #c5ccd4;
+}
+
+body.theme-dark .nav-pills > li > a {
+  color: #d6dbe0;
+}
+
+body.theme-dark .nav-pills > li > a:hover,
+body.theme-dark .nav-pills > li > a:focus {
+  background-color: #1b2430;
+}
+
+body.theme-dark .list-group-item {
+  background-color: #141b22;
+  border-color: #22303d;
+  color: #d6dbe0;
+}
+
+body.theme-dark .list-group-item:hover {
+  background-color: #1b2430;
+}
+
+body.theme-dark .form-control {
+  background-color: #0f141a;
+  border-color: #22303d;
+  color: #e6e9ee;
+}
+
+body.theme-dark .form-control:focus {
+  border-color: #3b526a;
+  box-shadow: 0 0 0 1px rgba(59, 82, 106, 0.3);
+}
+
+body.theme-dark .modal-content {
+  background-color: #141b22;
+  border-color: #22303d;
+  color: #d6dbe0;
+}
+
+body.theme-dark .modal-header {
+  border-bottom: 1px solid #22303d;
+}
+
+body.theme-dark .modal-header .close {
+  color: #fff;
+  opacity: 1;
+}
+
+body.theme-dark .modal-footer {
+  border-top: 1px solid #22303d;
+}
+
+body.theme-dark .table > thead > tr > th,
+body.theme-dark .table > tbody > tr > th,
+body.theme-dark .table > tbody > tr > td,
+body.theme-dark .table > tfoot > tr > td {
+  border-top: 1px solid #22303d;
+}
+
+body.theme-dark .nav-tabs {
+  border-bottom: 1px solid #22303d;
+}
+
+body.theme-dark .nav-tabs > li > a {
+  color: #cfd6dd;
+}
+
+body.theme-dark .nav-tabs > li.active > a,
+body.theme-dark .nav-tabs > li.active > a:hover,
+body.theme-dark .nav-tabs > li.active > a:focus {
+  background-color: #141b22;
+  border: 1px solid #22303d;
+  border-bottom-color: transparent;
+  color: #ffffff;
+}
+
+body.theme-dark #preview-plain,
+body.theme-dark #preview-source {
+  background-color: #0f141a;
+  color: #e6e9ee;
+}
+
+body.theme-dark .headers tbody th {
+  color: #9fb0c2;
+}

assets/js/controllers.js

@@ -40,6 +40,33 @@ mailhogApp.controller('MailCtrl', function ($scope, $http, $sce, $timeout) {
   $scope.cache = {};
   $scope.previewAllHeaders = false;
 
+  function applyTheme(theme) {
+    if (!document || !document.body) { return; }
+    document.body.classList.remove('theme-dark');
+    if (theme === 'dark') {
+      document.body.classList.add('theme-dark');
+    }
+  }
+
+  $scope.theme = 'light';
+  if (typeof(Storage) !== "undefined") {
+    $scope.theme = localStorage.getItem("theme") || $scope.theme;
+  }
+  if ($scope.theme === 'light' && window.matchMedia) {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      $scope.theme = 'dark';
+    }
+  }
+  applyTheme($scope.theme);
+
+  $scope.toggleTheme = function() {
+    $scope.theme = ($scope.theme === 'dark') ? 'light' : 'dark';
+    if (typeof(Storage) !== "undefined") {
+      localStorage.setItem("theme", $scope.theme);
+    }
+    applyTheme($scope.theme);
+  }
+
   $scope.eventsPending = {};
   $scope.eventCount = 0;
   $scope.eventDone = 0;

assets/templates/layout.html

@@ -46,6 +46,12 @@
           </form>
 
           <ul class="nav navbar-nav navbar-right">
+            <li>
+              <a href="#" ng-click="toggleTheme(); $event.preventDefault()" title="Toggle dark mode">
+                <span class="glyphicon glyphicon-adjust"></span>
+                {{ theme === 'dark' ? 'Light' : 'Dark' }} mode
+              </a>
+            </li>
             <li>
               <a target="_blank" href="https://github.com/mailhog/MailHog">
                 <img src="images/github.png" height="16" alt="GitHub"> GitHub

go.mod

@@ -0,0 +1,24 @@
+module github.com/mailhog/MailHog-UI
+
+go 1.26.1
+
+require (
+	github.com/gorilla/pat v1.0.2
+	github.com/ian-kent/envconf v0.0.0-20141026121121-c19809918c02
+	github.com/ian-kent/go-log v0.0.0-20160113211217-5731446c36ab
+	github.com/mailhog/MailHog v1.0.1
+	github.com/mailhog/http v1.0.1
+)
+
+require (
+	github.com/bmizerany/assert v0.0.0-20160611221934-b7ed37b82869 // indirect
+	github.com/gorilla/context v1.1.2 // indirect
+	github.com/gorilla/mux v1.8.1 // indirect
+	github.com/kr/pretty v0.3.1 // indirect
+	github.com/philhofer/fwd v1.2.0 // indirect
+	github.com/smartystreets/goconvey v1.8.1 // indirect
+	github.com/stretchr/testify v1.11.1 // indirect
+	github.com/t-k/fluent-logger-golang v1.0.0 // indirect
+	github.com/tinylib/msgp v1.6.3 // indirect
+	golang.org/x/crypto v0.49.0 // indirect
+)

go.sum

@@ -0,0 +1,48 @@
+github.com/bmizerany/assert v0.0.0-20160611221934-b7ed37b82869 h1:DDGfHa7BWjL4YnC6+E63dPcxHo2sUxDIu8g3QgEJdRY=
+github.com/bmizerany/assert v0.0.0-20160611221934-b7ed37b82869/go.mod h1:Ekp36dRnpXw/yCqJaO+ZrUyxD+3VXMFFr56k5XYrpB4=
+github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/gopherjs/gopherjs v1.17.2 h1:fQnZVsXk8uxXIStYb0N4bGk7jeyTalG/wsZjQ25dO0g=
+github.com/gopherjs/gopherjs v1.17.2/go.mod h1:pRRIvn/QzFLrKfvEz3qUuEhtE/zLCWfreZ6J5gM2i+k=
+github.com/gorilla/context v1.1.2 h1:WRkNAv2uoa03QNIc1A6u4O7DAGMUVoopZhkiXWA2V1o=
+github.com/gorilla/context v1.1.2/go.mod h1:KDPwT9i/MeWHiLl90fuTgrt4/wPcv75vFAZLaOOcbxM=
+github.com/gorilla/mux v1.8.1 h1:TuBL49tXwgrFYWhqrNgrUNEY92u81SPhu7sTdzQEiWY=
+github.com/gorilla/mux v1.8.1/go.mod h1:AKf9I4AEqPTmMytcMc0KkNouC66V3BtZ4qD5fmWSiMQ=
+github.com/gorilla/pat v1.0.2 h1:TDh/RulbnPxMQACcwbgMF5Bf00jaGoeYBNu+XUFuwtE=
+github.com/gorilla/pat v1.0.2/go.mod h1:ioQ7dFQ2KXmOmWLJs6vZAfRikcm2D2JyuLrL9b5wVCg=
+github.com/ian-kent/envconf v0.0.0-20141026121121-c19809918c02 h1:dU8zq210pt1b71X8xh9GOxC7uBHNtQ9BYC+Lb6SA/mA=
+github.com/ian-kent/envconf v0.0.0-20141026121121-c19809918c02/go.mod h1:1m5fo3aKG2moYtGHC4I2nFkXmG97+vCeaEIWC+mXTSI=
+github.com/ian-kent/go-log v0.0.0-20160113211217-5731446c36ab h1:OgrFrYWlVzY7Tc8rq7Y4ErlKo28igc70gbfJGTVWTJk=
+github.com/ian-kent/go-log v0.0.0-20160113211217-5731446c36ab/go.mod h1:6HitiSDIbT2r0dab4CoKoMAtR7tb0ORQ3OmjkjCZ+zk=
+github.com/jtolds/gls v4.20.0+incompatible h1:xdiiI2gbIgH/gLH7ADydsJ1uDOEzR8yvV7C0MuV77Wo=
+github.com/jtolds/gls v4.20.0+incompatible/go.mod h1:QJZ7F/aHp+rZTRtaJ1ow/lLfFfVYBRgL+9YlvaHOwJU=
+github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE=
+github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
+github.com/mailhog/MailHog v1.0.1 h1:NDExFIj+JGzXT3kmG31r7Okrn78Sk/5p9lP/TV8OE4E=
+github.com/mailhog/MailHog v1.0.1/go.mod h1:QlN3aQB5Kx2ZoQy439EWkjWHyJrgqNDsjfknyQOBCOI=
+github.com/mailhog/http v1.0.1 h1:i3sxAt7/WcdRXdKJZgiDRkWIAYScnrqqHQTZSxXkM0I=
+github.com/mailhog/http v1.0.1/go.mod h1:91oqUCI9ZoSDY2cTj4pWDJVBHCK1U762V2a4if4KlOw=
+github.com/philhofer/fwd v1.2.0 h1:e6DnBTl7vGY+Gz322/ASL4Gyp1FspeMvx1RNDoToZuM=
+github.com/philhofer/fwd v1.2.0/go.mod h1:RqIHx9QI14HlwKwm98g9Re5prTQ6LdeRQn+gXJFxsJM=
+github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/rogpeppe/go-internal v1.9.0 h1:73kH8U+JUqXU8lRuOHeVHaa/SZPifC7BkcraZVejAe8=
+github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs=
+github.com/smarty/assertions v1.15.0 h1:cR//PqUBUiQRakZWqBiFFQ9wb8emQGDb0HeGdqGByCY=
+github.com/smarty/assertions v1.15.0/go.mod h1:yABtdzeQs6l1brC900WlRNwj6ZR55d7B+E8C6HtKdec=
+github.com/smartystreets/goconvey v1.8.1 h1:qGjIddxOk4grTu9JPOU31tVfq3cNdBlNa5sSznIX1xY=
+github.com/smartystreets/goconvey v1.8.1/go.mod h1:+/u4qLyY6x1jReYOp7GOM2FSt8aP9CzCZL03bI28W60=
+github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
+github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
+github.com/t-k/fluent-logger-golang v1.0.0 h1:4IQzY+/l66Zkkhk9eB3LwF9vPkgKHJ1rpYdrRiap0EI=
+github.com/t-k/fluent-logger-golang v1.0.0/go.mod h1:6vC3Vzp9Kva0l5J9+YDY5/ROePwkAqwLK+KneCjSm4w=
+github.com/tinylib/msgp v1.6.3 h1:bCSxiTz386UTgyT1i0MSCvdbWjVW+8sG3PjkGsZQt4s=
+github.com/tinylib/msgp v1.6.3/go.mod h1:RSp0LW9oSxFut3KzESt5Voq4GVWyS+PSulT77roAqEA=
+golang.org/x/crypto v0.49.0 h1:+Ng2ULVvLHnJ/ZFEq4KdcDd/cfjrrjjNSXNzxg0Y4U4=
+golang.org/x/crypto v0.49.0/go.mod h1:ErX4dUh2UM+CFYiXZRTcMpEcN8b/1gxEuv3nODoYtCA=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=