Tweak light theme to resemble Twitter more

public/css/themes/light.css

@@ -1,30 +1,37 @@
 body {
     --bg_color: #E6ECF0;
     --fg_color: #0F0F0F;
-    --fg_faded: #161616;
+    --fg_faded: #657786;
-    --fg_dark: #191919;
+    --fg_dark: var(--fg_faded);
-    --fg_nav: #1DA1F2;
+    --fg_nav: var(--accent);
 
     --bg_panel: #FFFFFF;
     --bg_elements: #FDFDFD;
     --bg_overlays: #FFFFFF;
     --bg_hover: #F5F8FA;
 
-    --grey: #657786;
+    --grey: var(--fg_faded);
     --dark_grey: #D6D6D6;
     --darker_grey: #CECECE;
-    --darkest_grey: #E8E8E8;
+    --darkest_grey: #ECECEC;
     --border_grey: #E6ECF0;
 
-    --accent: #4E4E4E;
+    --accent: #1DA1F2;
     --accent_light: #A0EDFF;
-    --accent_dark: #1DA1F2;
+    --accent_dark: var(--accent);
     --accent_border: #1DA1F296;
 
-    --play_button_red: #d84d4d;
+    --play_button: #D84D4D;
-    --more_replies_dots: #0199f7;
+    --play_button_hover: #FF6C60;
+
+    --more_replies_dots: #0199F7;
     --error_red: #FF7266;
 
-    --verified_blue: #1DA1F2;
+    --verified_blue: var(--accent);
-    --icon_text: #FFFFFF;
+    --icon_text: ##F8F8F2;
+
+    --tab: var(--accent);
+    --tab_selected: #000000;
+
+    --profile_stat: var(--fg_dark);
 }

src/sass/general.scss

@@ -10,10 +10,6 @@
     @include center-panel(var(--error_red));
 }
 
-.search-bar {
-    // background: var(--darkest_grey);
-}
-
 .search-bar > form {
     @include center-panel(var(--darkest_grey));
 

src/sass/include/_mixins.css

@@ -19,11 +19,11 @@
 
     &:hover {
         .overlay-circle {
-            border-color: var(--accent);
+            border-color: var(--play_button_hover);
         }
 
         .overlay-triangle {
-            border-color: transparent transparent transparent var(--accent);
+            border-color: transparent transparent transparent var(--play_button_hover);
         }
     }
 }

src/sass/include/_variables.scss

@@ -2,7 +2,7 @@
 $bg_color: #0F0F0F;
 $fg_color: #F8F8F2;
 $fg_faded: #F8F8F2CF;
-$fg_dark: #9d9da0;
+$fg_dark: #FF6C60;
 $fg_nav: #FF6C60;
 
 $bg_panel: #161616;
@@ -21,12 +21,17 @@ $accent_light: #FFACA0;
 $accent_dark: #8A3731;
 $accent_border: #FF6C6091;
 
-$play_button_red: #D8574D;
+$play_button: #D8574D;
+$play_button_hover: #FF6C60;
+
 $more_replies_dots: #AD433B;
 $error_red: #420A05;
 
 $verified_blue: #1DA1F2;
-$icon_text: #F8F8F2;
+$icon_text: $fg_color;
+
+$tab: $fg_color;
+$tab_selected: $accent;
 
 $shadow: rgba(0,0,0,.6);
 $shadow_dark: rgba(0,0,0,.2);

src/sass/index.scss

@@ -32,13 +32,20 @@ body {
     --accent_dark: #{$accent_dark};
     --accent_border: #{$accent_border};
 
-    --play_button_red: #{$play_button_red};
+    --play_button: #{$play_button};
+    --play_button_hover: #{$play_button_hover};
+
     --more_replies_dots: #{$more_replies_dots};
     --error_red: #{$error_red};
 
     --verified_blue: #{$verified_blue};
     --icon_text: #{$icon_text};
 
+    --tab: #{$fg_color};
+    --tab_selected: #{$accent};
+
+    --profile_stat: #{$fg_color};
+
     background-color: var(--bg_color);
     color: var(--fg_color);
     font-family: $font_0, $font_1, $font_2, $font_3;

src/sass/profile/card.scss

@@ -94,10 +94,12 @@
 
 .profile-stat-header {
     font-weight: bold;
+    color: var(--profile_stat);
 }
 
 .profile-stat-num {
     display: block;
+    color: var(--profile_stat);
 }
 
 @media(max-width: 600px) {

src/sass/timeline.scss

@@ -42,7 +42,7 @@
 
     a {
         border-bottom: .1rem solid transparent;
-        color: inherit;
+        color: var(--tab);
         display: block;
         padding: 8px 0;
         text-decoration: none;
@@ -53,14 +53,14 @@
         }
 
         &.active {
-            border-bottom-color: var(--accent);
+            border-bottom-color: var(--tab_selected);
-            color: var(--accent);
+            color: var(--tab_selected);
         }
     }
 
     &.active a {
-        border-bottom-color: var(--accent);
+        border-bottom-color: var(--tab_selected);
-        color: var(--accent);
+        color: var(--tab_selected);
     }
 
     &.wide {

src/sass/tweet/_base.scss

@@ -68,6 +68,10 @@
     margin-left: 4px;
 }
 
+.tweet-date a, .username, .show-more a {
+    color: var(--fg_dark);
+}
+
 .tweet-published {
     margin: 0;
     margin-top: 5px;
@@ -89,7 +93,7 @@
 }
 
 .replying-to {
-    color: var(--fg_dark);
+    color: var(--fg_faded);
     margin: -2px 0 4px;
 
     a {

src/sass/tweet/media.scss

@@ -87,7 +87,7 @@
     align-items: center;
     display: flex;
     border-width: 5px;
-    border-color: var(--play_button_red);
+    border-color: var(--play_button);
     border-style: solid;
 }
 
@@ -96,7 +96,7 @@
     height: 0;
     border-style: solid;
     border-width: 12px 0 12px 17px;
-    border-color: transparent transparent transparent var(--play_button_red);
+    border-color: transparent transparent transparent var(--play_button);
     margin-left: 14px;
 }