Adds dark mode support (#218)

* Adds dark mode support Updates the css to support dark mode via media query. The dark theme its heavily inspired on the new dark mode for google.com.
inbucket · Jul 20, 2021 · bf8536a · bf8536a
1 parent 985f270
commit bf8536a
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 23 deletions.
diff --git a/ui/src/mailbox.css b/ui/src/mailbox.css
@@ -76,7 +76,7 @@
 
   .message-list {
     display: block;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 
   .message-list-controls {

diff --git a/ui/src/main.css b/ui/src/main.css
@@ -11,6 +11,68 @@
   --selected-color: #eee;
   --focused-color: #fff;
   --focused-bg-color: #337ab7;
+
+  --input-bg: white;
+  --input-bg-active: white;
+
+  --btn-default-bg-color: #337ab7;
+  --btn-default-bg-image: linear-gradient(to bottom, #337ab7 0, #265a88 100%);
+  --btn-default-color: #ffffff;
+  --btn-danger-bg-color: #d9534f;
+  --btn-danger-bg-image: linear-gradient(to bottom, #d9534f 0, #c12e2a 100%);
+  --btn-light-bg-color: #eee;
+  --btn-light-bg-image: linear-gradient(to bottom, #f0f0f0 0, #e0e0e0 100%);
+
+  --monitor-header-bg: #e8e8e8;
+
+  --well-bg-color: #f5f5f5;
+  --well-bg-image: linear-gradient(to bottom, #e8e8e8 0, #f5f5f5 100%);
+
+  --well-warn-bg-color: #fff8cf;
+  --well-warn-bg-image: linear-gradient(to bottom, #fff899 0, #fff8cf 100%);
+  --well-warn-color: inherit;
+
+  --well-error-bg-color: #f58080;
+  --well-error-bg-image: linear-gradient(to bottom, #e86060 0, #f58080 100%);
+  --well-error-color: inherit;
+
+  --well-border: #e8e8e8;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #202124;
+    --primary-color: #bdc1c6;
+    --high-color: #8ab4f8;
+    --border-color: #5f6368;
+    --selected-color: #303134;
+
+    --input-bg: var(--bg-color);
+    --input-bg-active: rgb(48, 49, 52);
+
+    --btn-default-bg-color: #303134;
+    --btn-default-bg-image: none;
+    --btn-default-color: #e8eaed;
+    /*--btn-danger-bg-color: #d9534f;*/
+    --btn-danger-bg-image: none;
+    /*--btn-light-bg-color: #eee;*/
+    --btn-light-bg-image: none;
+
+    --monitor-header-bg: var(--selected-color);
+
+    --well-bg-color: var(--low-color);
+    --well-bg-image: none;
+
+    --well-warn-bg-color: #c3c099;
+    --well-warn-bg-image: none;
+    --well-warn-color: var(--bg-color);
+
+    --well-error-bg-color: #e86060;
+    --well-error-bg-image: none;
+    --well-error-color: var(--bg-color);
+
+    --well-border: var(--border-color);
+  }
 }
 
 html, body, div, span, applet, object, iframe,
@@ -39,7 +101,7 @@ time, mark, audio, video {
 }
 
 a {
-    color: #337ab7;
+    color: var(--high-color);
     text-decoration: none;
 }
 
@@ -67,8 +129,8 @@ h1, h2, h3, h4, h5, h6, p {
 /** SHARED */
 
 a.button {
-  background-color: #337ab7;
-  background-image: linear-gradient(to bottom, #337ab7 0, #265a88 100%);
+  background-color: var(--btn-default-bg-color);
+  background-image: var(--btn-default-bg-image);
   border: none;
   border-radius: 4px;
   color: #fff;
@@ -82,11 +144,9 @@ a.button {
 }
 
 .well {
-  --light: #f5f5f5;
-  --dark: #e8e8e8;
-  background-color: var(--light);
-  background-image: linear-gradient(to bottom, var(--dark) 0, var(--light) 100%);
-  border: 1px solid var(--dark);
+  background-color: var(--well-bg-color);
+  background-image: var(--well-bg-image);
+  border: 1px solid var(--well-border);
   border-radius: 4px;
   box-shadow: 0 1px 2px rgba(0,0,0,.05);
   padding: 6px 10px;
@@ -98,8 +158,9 @@ a.button {
 }
 
 .well-error {
-  --light: #f58080;
-  --dark: #e86060;
+  background-color: var(--well-error-bg-color);
+  background-image: var(--well-error-bg-image);
+  color: var(--well-error-color);
 }
 
 .well-error a {
@@ -108,8 +169,22 @@ a.button {
 }
 
 .well-warn {
-  --light: #fff8cf;
-  --dark: #fff899;
+  background-color: var(--well-warn-bg-color);
+  background-image: var(--well-warn-bg-image);
+  color: var(--well-warn-color);
+}
+
+input {
+  border: 1px solid var(--border-color);
+  background-color: var(--input-bg);
+}
+
+@media (prefers-color-scheme: dark) {
+  input:focus-visible, input:hover {
+    outline: none;
+    border: 1px solid var(--input-bg-active);
+    background-color: var(--input-bg-active);
+  }
 }
 
 /** APP */
@@ -237,11 +312,11 @@ h3 {
 }
 
 .button-bar button {
-  background-color: #337ab7;
-  background-image: linear-gradient(to bottom, #337ab7 0, #265a88 100%);
+  background-color: var(--btn-default-bg-color);
+  background-image: var(--btn-default-bg-image);
   border: none;
   border-radius: 4px;
-  color: #fff;
+  color: var(--btn-default-color);
   display: inline-block;
   font-size: 12px;
   font-style: normal;
@@ -254,18 +329,22 @@ h3 {
   text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
 }
 
+.button-bar button:hover {
+    border: 1px solid var(--border-color);
+}
+
 .button-bar *:not(:last-child) {
   margin-right: 4px;
 }
 
 .button-bar button.danger {
-  background-color: #d9534f;
-  background-image: linear-gradient(to bottom, #d9534f 0, #c12e2a 100%);
+  background-color: var(--btn-danger-bg-color);
+  background-image: var(--btn-danger-bg-image);
 }
 
 .button-bar button.light {
-  background-color: #eee;
-  background-image: linear-gradient(to bottom, #f0f0f0 0, #e0e0e0 100%);
+  background-color: var(--btn-light-bg-color);
+  background-image: var(--btn-light-bg-image);
   color: #000;
 }
 
@@ -285,7 +364,7 @@ h3 {
 }
 
 .metric-panel h2 {
-  background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);
+  background-color: var(--monitor-header-bg);
   font-size: 16px;
   font-weight: 500;
   padding: 10px;

diff --git a/ui/src/navbar.css b/ui/src/navbar.css
@@ -2,16 +2,34 @@
 
 :root {
   --navbar-color: #9d9d9d;
+  --navbar-color-active: var(--navbar-color);
   --navbar-bg: #222;
+  --navbar-bg-active: #080808;
+  --navbar-bg-border-active: none;
   --navbar-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
   --navbar-height: 50px;
+  --navbar-border-bottom: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --navbar-color: #969ba1;
+    --navbar-color-active: #8ab4f8;
+    --navbar-bg: var(--bg-color);
+    --navbar-bg-active: none;
+    --navbar-bg-border-active: 3px solid var(--navbar-color-active);
+    --navbar-image: none;
+    --navbar-border-bottom: 1px solid var(--border-color);
+  }
 }
 
+
 .navbar {
   background-color: var(--navbar-bg);
   background-image: var(--navbar-image);
   text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
   min-height: var(--navbar-height);
+  border-bottom: var(--navbar-border-bottom);
 }
 
 .main-nav {
@@ -66,7 +84,9 @@
 }
 
 li.navbar-active > *:first-child {
-  background-color: #080808;
+  background-color: var(--navbar-bg-active);
+  color: var(--navbar-color-active);
+  border-bottom: var(--navbar-bg-border-active);
 }
 
 li.navbar-active a,
@@ -92,7 +112,6 @@ li.navbar-active span,
 }
 
 .navbar-mailbox input {
-  border: 1px solid var(--border-color);
   border-radius: 4px;
   padding: 5px 10px;
   width: 250px;