Dark mode improvements

6 files changed, 39 insertions, 35 deletions

diff --git a/vnext/src/index.css b/vnext/src/index.css
index 225379d7..7bbc0a22 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -1,8 +1,12 @@
 @custom-media --viewport-desktop (width >=62.5rem);
 :root {
     --main-width: 1000px;
-    --background-color: #fff;
+    --main-background-color: #fdfdfe;
+    --background-color: #f8f8f8;
+    --border-color: #eee;
+    --text-background-color: #fff;
     --text-color: #363636;
+    --link-color: #3c77aa;
 }
 
 * {
@@ -32,16 +36,13 @@ body {
 }
 
 body {
-    background: #f8f8f8;
+    background: var(--main-background-color);
     text-size-adjust: 100%;
     word-break: break-word;
     color: var(--text-color);
     line-height: 1.4;
     text-rendering: optimizeLegibility;
-}
-
-textarea {
-    overflow: auto;
+    -webkit-overflow-scrolling: touch;
 }
 
 html,
@@ -87,7 +88,7 @@ body:not(:-moz-handler-blocked) fieldset {
 }
 
 a {
-    color: #069;
+    color: var(--link-color);
     text-decoration: none;
 }
 
@@ -107,8 +108,8 @@ hr {
 
 #header {
     grid-area: header;
-    background: var(--background-color);
-    border-bottom: 1px solid #eee;
+    background: var(--text-background-color);
+    border-bottom: 1px solid var(--border-color);
     transition: transform 0.2s;
     overflow-x: hidden;
 }
@@ -131,7 +132,7 @@ hr {
     flex-direction: row;
     justify-content: space-around;
     background: var(--background-color);
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border-color);
 }
 
 .nav_content {
@@ -141,13 +142,12 @@ hr {
 #content {
     grid-area: content;
     margin-top: 12px;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
 }
 
 #footer {
     display: none;
-    background: #f8f8f8;
+    background: var(--background-color);
     border-top: 1px solid #ccc;
     color: var(--text-color);
     padding: 10px;
@@ -224,7 +224,7 @@ hr {
 }
 
 #sidebar > a:hover {
-    background-color: #f8f8f8;
+    background-color: var(--background-color);
     border-top: 2px solid #ff339a;
     cursor: pointer;
 }
@@ -237,14 +237,14 @@ hr {
 #ctitle a,
 .l a,
 .msg-button {
-    border-bottom: 2px solid #fdfdfe;
+    border-bottom: 2px solid var(--main-background-color);
 }
 
 #global a:hover,
 #ctitle a:hover,
 .l a:hover,
 .msg-button:hover {
-    background-color: #f8f8f8;
+    background-color: var(--background-color);
     border-bottom: 2px solid #ff339a;
     cursor: pointer;
 }
@@ -299,8 +299,8 @@ hr {
 }
 
 .page {
-    background: #fdfdfe;
-    border: 1px solid #eee;
+    background: var(--main-background-color);
+    border: 1px solid var(--border-color);
     margin-bottom: 12px;
     padding: 6px;
     text-align: center;
@@ -314,7 +314,7 @@ hr {
     width: 6px;
 } /* this targets the default scrollbar (compulsory) */
 ::-webkit-scrollbar-track {
-    background-color: #f8f8f8;
+    background-color: var(--main-background-color);
 } /* the new scrollbar will have a flat appearance with the set background color */
 
 ::-webkit-scrollbar-thumb {
@@ -322,7 +322,7 @@ hr {
 } /* this will style the thumb, ignoring the track */
 
 ::-webkit-scrollbar-button {
-    background-color: #eee;
+    background-color: var(--border-color);
 } /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
 ::-webkit-scrollbar-corner {
@@ -351,7 +351,7 @@ hr {
         justify-content: initial;
         border-top: initial;
         margin: 12px;
-        border: 1px solid #eee;
+        border: 1px solid var(--border-color);
     }
     #sidebar > a:hover {
         border-top: initial;
@@ -361,7 +361,11 @@ hr {
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-color: #363636;
-        --text-color: #fff;
+        --main-background-color: #222;
+        --background-color: #333;
+        --text-background-color: #383838;
+        --border-color: #4c4c4c;
+        --text-color: #ccc;
+        --link-color: #c38855;
     }
 }
diff --git a/vnext/src/ui/Button.css b/vnext/src/ui/Button.css
index 2acb87be..539e6d36 100644
--- a/vnext/src/ui/Button.css
+++ b/vnext/src/ui/Button.css
@@ -1,6 +1,6 @@
 .Button {
     background: #fff;
-    border: 1px solid #eee;
+    border: 1px solid var(--border-color);
     color: #888;
     cursor: pointer;
     display: inline-block;
diff --git a/vnext/src/ui/Contacts.js b/vnext/src/ui/Contacts.js
index 3852b26f..7a42283c 100644
--- a/vnext/src/ui/Contacts.js
+++ b/vnext/src/ui/Contacts.js
@@ -45,5 +45,5 @@ const chatTitleStyle = {
     textAlign: 'left',
     background: '#fff',
     color: '#222',
-    borderBottom: '1px solid #eee'
+    borderBottom: '1px solid var(--border-color)'
 };
diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css
index 126fcd6a..d66352a4 100644
--- a/vnext/src/ui/Message.css
+++ b/vnext/src/ui/Message.css
@@ -10,11 +10,11 @@
     padding: 12px;
 }
 .msg-cont > .l {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border-color);
     display: flex;
     align-items: center;
     justify-content: space-around;
-    background: #fdfdfe;
+    background: var(--main-background-color);
 }
 .msg-cont > .l a {
     color: #88958d;
@@ -36,8 +36,8 @@
     margin-bottom: 0;
 }
 .msg-cont {
-    background: #FFF;
-    border: 1px solid #eee;
+    background: var(--text-background-color);
+    border: 1px solid var(--border-color);
     line-height: 140%;
     margin-bottom: 12px;
 }
@@ -119,8 +119,8 @@ blockquote {
 }
 .msg-comment input {
     align-self: flex-start;
-    background: #EEE;
-    border: 1px solid #CCC;
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
     color: #999;
     margin: 0 0 0 6px;
     position: sticky;
@@ -130,11 +130,11 @@ blockquote {
 }
 .msg-recomms {
     color: #88958d;
-    background: #fdfdfe;
+    background: var(--main-background-color);
     font-size: small;
     margin-bottom: 10px;
     padding: 6px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color);
     overflow: hidden;
     text-indent: 10px;
 }
diff --git a/vnext/src/ui/Thread.css b/vnext/src/ui/Thread.css
index 3a3f9589..5e515627 100644
--- a/vnext/src/ui/Thread.css
+++ b/vnext/src/ui/Thread.css
@@ -1,6 +1,6 @@
 #replies {
     background: #fff;
-    border: 1px solid #eee;
+    border: 1px solid var(--border-color);
     padding: 12px;
 }
 
diff --git a/vnext/src/ui/helpers/BubbleStyle.js b/vnext/src/ui/helpers/BubbleStyle.js
index 570b7337..f44f726e 100644
--- a/vnext/src/ui/helpers/BubbleStyle.js
+++ b/vnext/src/ui/helpers/BubbleStyle.js
@@ -1,7 +1,7 @@
 export function bubbleStyle(me, msg) {
     const isMe = me.uid === msg.user.uid;
     const color = isMe ? '#fff' : '#222';
-    const background = isMe ? '#ec4b98' : '#eee';
+    const background = isMe ? '#ec4b98' : 'var(--border-color)';
     return {
         background: background,
         color: color,