Add light/dark mode switching

src/css/dark.css

@@ -0,0 +1,13 @@
+/* dark.css: 👉 light-on-dark */
+:root {
+    --text-color: #ffffff;
+    --text-small: #777;
+    --text-time: rgba(255, 255, 255, 0.45);
+    --main-color: #3b3936;
+    --header-color: #292929;
+    --chat-active: #252525;
+    --chat-hover: #363636;
+    --msg-content-background: #000000;
+    --our-msg: #3f4939;
+    --notify: #476974;
+}

src/css/light.css

@@ -0,0 +1,13 @@
+/* light.css: 👉 dark-on-light */
+:root {
+    --text-color: #262626;
+    --text-small: #777;
+    --text-time: rgba(0, 0, 0, 0.45);
+    --main-color: #e5ddd5;
+    --header-color: #efefef;
+    --chat-active: #eaeaea;
+    --chat-hover: #f3f3f3;
+    --msg-content-background: #ffffff;
+    --our-msg: #d7f7c5;
+    --notify: #9ee8ff;
+}

src/css/style.css

@@ -1,3 +1,7 @@
+:root {
+  color-scheme: light dark;
+}
+
 * { box-sizing: border-box; }
 
 html { height:100%; overflow:hidden; }
@@ -5,7 +9,7 @@ html { height:100%; overflow:hidden; }
 body {
   opacity: 0;
   font-size: 15px;
-  color: #262626;
+  color: var(--text-color);
   font-family: "SF Pro Text", "SF Pro Icons", system, -apple-system, system-ui, system-ui, "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;
   padding: 0;
   margin: 0;
@@ -82,7 +86,7 @@ img {
 .chat {
   display: flex;
   flex-direction: row;
-  background-color: white;
+  background-color: var(--msg-content-background);
   height: 100%;
   overflow: hidden;
   position: fixed;
@@ -117,7 +121,7 @@ img {
 header {
   display: flex;
   flex:1;
-  background-color: #efefef;
+  background-color: var(--header-color);
   max-height:60px;
   border-bottom: 1px solid rgba(0,0,0,.08);
 }
@@ -146,7 +150,7 @@ header #back-button {
   flex:1;
   overflow-y: scroll;
   padding: 10px 15px;
-  background-color: #e5ddd5;
+  background-color: var(--main-color);
   min-width: 0;
 }
 
@@ -158,7 +162,7 @@ header #back-button {
 }
 
 .msg-content {
-  background-color: #ffffff;
+  background-color: var(--msg-content-background);
   padding: 6px 10px;
   border-radius: 8px;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
@@ -236,13 +240,13 @@ header #back-button {
 }
 
 .msg.our .msg-content {
-  background-color: #d7f7c5;
+  background-color: var(--our-msg);
 }
 
 .msg .time {
   text-align: right;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
+  color: var(--text-time);
 }
 
 .day-separator {
@@ -330,7 +334,7 @@ header #back-button {
   flex:1;
   flex-direction: row;
   max-height:70px;
-  background-color: #efefef;
+  background-color: var(--header-color);
   padding: 10px 15px;
 }
 
@@ -364,7 +368,7 @@ header #back-button {
   overflow-y: hidden;
   overflow-x: hidden;
   padding: 10px 15px;
-  background-color: #efefef;
+  background-color: var(--header-color);
   cursor: pointer;
 }
 
@@ -417,7 +421,7 @@ header #back-button {
 .chat-item .text {
   padding-right: 5px;
   padding-top: 16px;
-  border-bottom: 1px solid #f3f3f3;
+  border-bottom: 1px solid var(--chat-hover);
   line-height: 20px;
 }
 
@@ -452,20 +456,20 @@ header #back-button {
 
 small {
   font-size: 12px;
-  color: #777;
+  color: var(--text-small);
 }
 
 .chat-item.active, .chat-item.active:hover {
-  background: #eaeaea;
+  background: var(--chat-active);
 }
 
 .chat-item:hover {
-  background: #f3f3f3;
+  background: var(--chat-hover);
 }
 
 .chat-item.new {
   align-items: center;
-  border-bottom: 1px solid #f3f3f3;
+  border-bottom: 1px solid var(--chat-hover);
 }
 
 #new-chat input {
@@ -474,11 +478,11 @@ small {
 
 #not-seen-by-them {
   padding: 10px 15px;
-  background-color: #9ee8ff;
+  background-color: var(--notify);
 }
 
 #not-seen-by-them button {
-  background: #fff;
+  background: var(--msg-content-background);
 }
 
 #not-seen-by-them button:hover, #not-seen-by-them button:active, #not-seen-by-them button:focus {
@@ -486,7 +490,7 @@ small {
 }
 
 #enable-notifications-prompt {
-  background: #9ee8ff;
+  background: var(--notify);
   padding: 22px 15px;
   cursor: pointer;
   overflow-y: hidden;

src/index.html

@@ -23,7 +23,22 @@
   <meta name="theme-color" content="#74d5f1">
 
   <link rel="stylesheet" type="text/css" href="./css/cropper.min.css">
+
+  <script>
+    // If `prefers-color-scheme` is not supported, fall back to light mode.
+    if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
+        document.documentElement.style.display = 'none';
+        document.head.insertAdjacentHTML(
+            'beforeend',
+            '<link rel="stylesheet" href="style/light.css" onload="document.documentElement.style.display = \'\'">'
+        );
+    }
+  </script>
+  <link rel="stylesheet" href="./css/dark.css" media="(prefers-color-scheme: dark)">
+  <link rel="stylesheet" href="./css/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
+  <!-- The main stylesheet -->
   <link rel="stylesheet" type="text/css" href="./css/style.css">
+
   <script>
     var userAgent = navigator.userAgent.toLowerCase();
     var isElectron = (userAgent.indexOf(' electron/') > -1);