From 81160b1915b19cd663352a6b6034b65d6d79b094 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 11:15:57 +0200
Subject: [PATCH 01/14] Rewrite sass variables to support themes

---
 src/sass/general.scss            | 16 +++++++-----
 src/sass/include/_mixins.css     |  8 +++---
 src/sass/include/_variables.scss | 41 +++++++++++++++++++++++++++++
 src/sass/index.scss              | 44 +++++++++++++++++++++++++++-----
 src/sass/inputs.scss             | 28 ++++++++++----------
 src/sass/navbar.scss             | 10 +++++---
 src/sass/profile/card.scss       | 12 ++++-----
 src/sass/profile/photo-rail.scss |  4 +--
 src/sass/search.scss             |  6 ++---
 src/sass/timeline.scss           | 36 +++++++++++++-------------
 src/sass/tweet/_base.scss        | 14 +++++-----
 src/sass/tweet/card.scss         | 12 ++++-----
 src/sass/tweet/media.scss        |  8 +++---
 src/sass/tweet/poll.scss         |  8 +++---
 src/sass/tweet/quote.scss        | 12 ++++-----
 src/sass/tweet/thread.scss       |  8 +++---
 16 files changed, 173 insertions(+), 94 deletions(-)

diff --git a/src/sass/general.scss b/src/sass/general.scss
index a92c6e3..5098b43 100644
--- a/src/sass/general.scss
+++ b/src/sass/general.scss
@@ -7,15 +7,19 @@
 }
 
 .error-panel {
-    @include center-panel($error_red);
+    @include center-panel(var(--error_red));
+}
+
+.search-bar {
+    // background: var(--darkest_grey);
 }
 
 .search-bar > form {
-    @include center-panel($darkest-grey);
+    @include center-panel(var(--darkest_grey));
 
     button {
-        background: #303030;
-        color: $fg_color;
+        background: var(--bg_elements);
+        color: var(--fg_color);
         border: 0;
         border-radius: 3px;
         cursor: pointer;
@@ -27,8 +31,8 @@
     input {
         font-size: 16px;
         width: 100%;
-        background: $bg_elements;
-        color: $fg_color;
+        background: var(--bg_elements);
+        color: var(--fg_color);
         border: 0;
         border-radius: 4px;
         padding: 4px;
diff --git a/src/sass/include/_mixins.css b/src/sass/include/_mixins.css
index 01e42b7..ab01f05 100644
--- a/src/sass/include/_mixins.css
+++ b/src/sass/include/_mixins.css
@@ -19,11 +19,11 @@
 
     &:hover {
         .overlay-circle {
-            border-color: $accent;
+            border-color: var(--accent);
         }
 
         .overlay-triangle {
-            border-color: transparent transparent transparent $accent;
+            border-color: transparent transparent transparent var(--accent);
         }
     }
 }
@@ -51,11 +51,11 @@
 
 @mixin input-colors {
     &:hover {
-        border-color: $accent;
+        border-color: var(--accent);
     }
 
     &:active {
-        border-color: $accent_light;
+        border-color: var(--accent_light);
     }
 }
 
diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss
index a0f7f0c..d5c71f7 100644
--- a/src/sass/include/_variables.scss
+++ b/src/sass/include/_variables.scss
@@ -3,10 +3,12 @@ $bg_color: #0F0F0F;
 $fg_color: #F8F8F2;
 $fg_faded: #F8F8F2CF;
 $fg_dark: #9d9da0;
+$fg_nav: #000000;
 
 $bg_panel: #161616;
 $bg_elements: #121212;
 $bg_overlays: #1F1F1F;
+$bg_hover: #1A1A1A;
 
 $grey: #888889;
 $dark_grey: #404040;
@@ -24,6 +26,7 @@ $more_replies_dots: #AD433B;
 $error_red: #420A05;
 
 $verified_blue: #1DA1F2;
+$icon_text: #F8F8F2;
 
 $shadow: rgba(0,0,0,.6);
 $shadow_dark: rgba(0,0,0,.2);
@@ -34,3 +37,41 @@ $font_1: Helvetica;
 $font_2: Arial;
 $font_3: sans-serif;
 $font_4: fontello;
+
+//theme
+$variables: (
+    --bg_color: var(--bg_color),
+    --fg_color: var(--fg_color),
+    --fg_faded: var(--fg_faded),
+    --fg_dark: var(--fg_dark),
+    --fg_nav: var(--fg_nav),
+
+    --bg_panel: var(--bg_panel),
+    --bg_elements: var(--bg_elements),
+    --bg_overlays: var(--bg_overlays),
+    --bg_hover: var(--bg_hover),
+
+    --grey: var(--grey),
+    --dark_grey: var(--dark_grey),
+    --darker_grey: var(--darker_grey),
+    --darkest_grey: var(--darkest_grey),
+    --border_grey: var(--border_grey),
+
+    --accent: var(--accent),
+    --accent_light: var(--accent_light),
+    --accent_dark: var(--accent_dark),
+    --accent_border: var(--accent_border),
+
+    --play_button_red: var(--play_button_red),
+    --more_replies_dots: var(--more_replies_dots),
+    --error_red: var(--error_red),
+
+    --verified_blue: var(--verified_blue),
+    --icon_text: var(--icon_text)
+);
+
+/*** theme helper ***/
+
+@function var($variable) {
+    @return map-get($variables, $variable);
+}
diff --git a/src/sass/index.scss b/src/sass/index.scss
index ad157d9..44501f4 100644
--- a/src/sass/index.scss
+++ b/src/sass/index.scss
@@ -9,8 +9,38 @@
 @import 'search';
 
 body {
-    background-color: $bg_color;
-    color: $fg_color;
+    // colors
+    --bg_color: #{$bg_color};
+    --fg_color: #{$fg_color};
+    --fg_faded: #{$fg_faded};
+    --fg_dark: #{$fg_dark};
+    --fg_nav: #{$fg_nav};
+
+    --bg_panel: #{$bg_panel};
+    --bg_elements: #{$bg_elements};
+    --bg_overlays: #{$bg_overlays};
+    --bg_hover: #{$bg_hover};
+
+    --grey: #{$grey};
+    --dark_grey: #{$dark_grey};
+    --darker_grey: #{$darker_grey};
+    --darkest_grey: #{$darkest_grey};
+    --border_grey: #{$border_grey};
+
+    --accent: #{$accent};
+    --accent_light: #{$accent_light};
+    --accent_dark: #{$accent_dark};
+    --accent_border: #{$accent_border};
+
+    --play_button_red: #{$play_button_red};
+    --more_replies_dots: #{$more_replies_dots};
+    --error_red: #{$error_red};
+
+    --verified_blue: #{$verified_blue};
+    --icon_text: #{$icon_text};
+
+    background-color: var(--bg_color);
+    color: var(--fg_color);
     font-family: $font_0, $font_1, $font_2, $font_3;
     font-size: 14px;
     line-height: 1.3;
@@ -36,7 +66,7 @@ p {
 }
 
 a {
-    color: $accent;
+    color: var(--accent);
 
     &:hover {
         text-decoration: underline;
@@ -54,7 +84,7 @@ legend {
     padding: .6em 0 .3em 0;
     border: 0;
     font-size: 16px;
-    border-bottom: 1px solid $border_grey;
+    border-bottom: 1px solid var(--border_grey);
     margin-bottom: 8px;
 }
 
@@ -80,7 +110,7 @@ ul {
     width: 100%;
     margin: 0 auto;
     margin-top: 10px;
-    background-color: $bg_overlays;
+    background-color: var(--bg_overlays);
     padding: 10px 15px;
     align-self: start;
 
@@ -91,8 +121,8 @@ ul {
 }
 
 .verified-icon {
-    color: $fg_color;
-    background-color: $verified_blue;
+    color: var(--icon_text);
+    background-color: var(--verified_blue);
     border-radius: 50%;
     flex-shrink: 0;
     margin: 2px 0 3px 3px;
diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss
index 0cea64b..0cf372d 100644
--- a/src/sass/inputs.scss
+++ b/src/sass/inputs.scss
@@ -3,9 +3,9 @@
 
 button {
     @include input-colors;
-    background-color: $bg_elements;
-    color: $fg_color;
-    border: 1px solid $accent_border;
+    background-color: var(--bg_elements);
+    color: var(--fg_color);
+    border: 1px solid var(--accent_border);
     padding: 3px 6px;
     font-size: 14px;
     cursor: pointer;
@@ -15,10 +15,10 @@ button {
 input[type="text"],
 input[type="date"] {
     @include input-colors;
-    background-color: $bg_elements;
+    background-color: var(--bg_elements);
     padding: 1px 4px;
-    color: $fg_color;
-    border: 1px solid $accent_border;
+    color: var(--fg_color);
+    border: 1px solid var(--accent_border);
     border-radius: 0;
     font-size: 14px;
 }
@@ -40,8 +40,8 @@ input::-webkit-calendar-picker-indicator {
 input::-webkit-datetime-edit-day-field:focus,
 input::-webkit-datetime-edit-month-field:focus,
 input::-webkit-datetime-edit-year-field:focus {
-    background-color: $accent;
-    color: $fg_color;
+    background-color: var(--accent);
+    color: var(--fg_color);
     outline: none;
 }
 
@@ -64,7 +64,7 @@ input::-webkit-datetime-edit-year-field:focus {
 }
 
 .icon-button button {
-    color: $accent;
+    color: var(--accent);
     text-decoration: none;
     background: none;
     border: none;
@@ -73,7 +73,7 @@ input::-webkit-datetime-edit-year-field:focus {
     padding-left: 4px;
 
     &:hover {
-        color: $accent_light;
+        color: var(--accent_light);
     }
 }
 
@@ -83,8 +83,8 @@ input::-webkit-datetime-edit-year-field:focus {
     right: 0;
     height: 17px;
     width: 17px;
-    background-color: $bg_elements;
-    border: 1px solid $accent_border;
+    background-color: var(--bg_elements);
+    border: 1px solid var(--accent_border);
 
     &:after {
         content: "";
@@ -114,11 +114,11 @@ input::-webkit-datetime-edit-year-field:focus {
     }
 
     &:hover input ~ .checkbox {
-        border-color: $accent;
+        border-color: var(--accent);
     }
 
     &:active input ~ .checkbox {
-        border-color: $accent_light;
+        border-color: var(--accent_light);
     }
 
     .checkbox:after {
diff --git a/src/sass/navbar.scss b/src/sass/navbar.scss
index 45b2fa2..b8c1e17 100644
--- a/src/sass/navbar.scss
+++ b/src/sass/navbar.scss
@@ -4,12 +4,16 @@ nav {
     display: flex;
     align-items: center;
     position: fixed;
-    background-color: $bg_overlays;
+    background-color: var(--bg_overlays);
     box-shadow: 0 0 4px $shadow;
     padding: 0;
     width: 100%;
     height: 50px;
     z-index: 1000;
+
+    a, .icon-button button {
+        color: var(--fg_nav);
+    }
 }
 
 .inner-nav {
@@ -26,7 +30,7 @@ nav {
     font-weight: 600;
 
     &:hover {
-        color: $accent_light;
+        color: var(--accent_light);
         text-decoration: unset;
     }
 }
@@ -54,7 +58,7 @@ nav {
         padding-left: 4px;
 
         &:hover {
-            color: $accent_light;
+            color: var(--accent_light);
             text-decoration: unset;
         }
     }
diff --git a/src/sass/profile/card.scss b/src/sass/profile/card.scss
index 2281911..fc89362 100644
--- a/src/sass/profile/card.scss
+++ b/src/sass/profile/card.scss
@@ -3,7 +3,7 @@
 
 .profile-card {
     flex-wrap: wrap;
-    background: $bg_panel;
+    background: var(--bg_panel);
     padding: 12px;
     display: flex;
 }
@@ -20,14 +20,14 @@
 
 .profile-card-username {
     @include breakable;
-    color: $fg_color;
+    color: var(--fg_color);
     font-size: 14px;
     display: block;
 }
 
 .profile-card-fullname {
     @include breakable;
-    color: $fg_color;
+    color: var(--fg_color);
     font-size: 16px;
     font-weight: bold;
     text-shadow: none;
@@ -45,8 +45,8 @@
         width: calc(100% - 8px);
         height: 100%;
         margin: 0;
-        border: 4px solid $darker_grey;
-        background: $bg_color;
+        border: 4px solid var(--darker_grey);
+        background: var(--bg_color);
     }
 }
 
@@ -67,7 +67,7 @@
     }
 
     .profile-joindate, .profile-location, profile-website {
-        color: $fg_faded;
+        color: var(--fg_faded);
         margin: 2px 0;
         width: 100%;
     }
diff --git a/src/sass/profile/photo-rail.scss b/src/sass/profile/photo-rail.scss
index 503125c..1cc78d7 100644
--- a/src/sass/profile/photo-rail.scss
+++ b/src/sass/profile/photo-rail.scss
@@ -3,7 +3,7 @@
 .photo-rail {
     &-card {
         float: left;
-        background: $bg_panel;
+        background: var(--bg_panel);
         border-radius: 0 0 4px 4px;
         width: 100%;
         margin: 5px 0;
@@ -18,7 +18,7 @@
         display: none;
         width: calc(100% - 24px);
         float: unset;
-        color: $accent;
+        color: var(--accent);
         justify-content: space-between;
     }
 
diff --git a/src/sass/search.scss b/src/sass/search.scss
index 40e70f3..0311fb0 100644
--- a/src/sass/search.scss
+++ b/src/sass/search.scss
@@ -29,9 +29,9 @@
 
     > label {
         display: inline;
-        background-color: #121212;
-        color: #F8F8F2;
-        border: 1px solid #FF6C6091;
+        background-color: var(--bg_elements);
+        color: var(--fg_color);
+        border: 1px solid var(--accent_border);
         padding: 1px 6px 2px 6px;
         font-size: 14px;
         cursor: pointer;
diff --git a/src/sass/timeline.scss b/src/sass/timeline.scss
index dcbbb92..9d0fd78 100644
--- a/src/sass/timeline.scss
+++ b/src/sass/timeline.scss
@@ -5,15 +5,15 @@
 }
 
 .timeline {
-    background-color: $bg_panel;
+    background-color: var(--bg_panel);
 
     > div:not(:first-child) {
-        border-top: 1px solid $border_grey;
+        border-top: 1px solid var(--border_grey);
     }
 }
 
 .timeline-header {
-    background-color: $bg_panel;
+    background-color: var(--bg_panel);
     text-align: center;
     padding: 8px;
     display: block;
@@ -31,7 +31,7 @@
     flex-wrap: wrap;
     list-style: none;
     margin: 0 0 5px 0;
-    background-color: $bg_panel;
+    background-color: var(--bg_panel);
     padding: 0;
 }
 
@@ -53,14 +53,14 @@
         }
 
         &.active {
-            border-bottom-color: $accent;
-            color: $accent;
+            border-bottom-color: var(--accent);
+            color: var(--accent);
         }
     }
 
     &.active a {
-        border-bottom-color: $accent;
-        color: $accent;
+        border-bottom-color: var(--accent);
+        color: var(--accent);
     }
 
     &.wide {
@@ -69,7 +69,7 @@
 }
 
 .timeline-footer {
-    background-color: $bg_panel;
+    background-color: var(--bg_panel);
     padding: 6px 0;
 }
 
@@ -81,48 +81,48 @@
     }
 
     h2 {
-        color: $accent;
+        color: var(--accent);
         font-size: 20px;
         font-weight: 600;
     }
 }
 
 .timeline-none {
-    color: $accent;
+    color: var(--accent);
     font-size: 20px;
     font-weight: 600;
     text-align: center;
 }
 
 .timeline-end {
-    background-color: $bg_panel;
-    color: $accent;
+    background-color: var(--bg_panel);
+    color: var(--accent);
     font-size: 16px;
     font-weight: 600;
     text-align: center;
 }
 
 .show-more {
-    background-color: $bg_panel;
+    background-color: var(--bg_panel);
     text-align: center;
     padding: .75em 0;
     display: block !important;
 
     a {
-        background-color: $darkest_grey;
+        background-color: var(--darkest_grey);
         display: inline-block;
         height: 2em;
         padding: 0 2em;
         line-height: 2em;
 
         &:hover {
-            background-color: $darker_grey;
+            background-color: var(--darker_grey);
         }
     }
 }
 
 .top-ref {
-    background-color: #0f0f0f;
+    background-color: var(--bg_color);
     border-top: none !important;
 
     .icon-down {
@@ -132,7 +132,7 @@
         text-decoration: none;
 
         &:hover {
-            color: $accent_light;
+            color: var(--accent_light);
         }
 
         &::before {
diff --git a/src/sass/tweet/_base.scss b/src/sass/tweet/_base.scss
index 46319e2..2a5ea17 100644
--- a/src/sass/tweet/_base.scss
+++ b/src/sass/tweet/_base.scss
@@ -52,7 +52,7 @@
     max-width: 80%;
     font-size: 14px;
     font-weight: 700;
-    color: $fg_color;
+    color: var(--fg_color);
 }
 
 .username {
@@ -71,7 +71,7 @@
 .tweet-published {
     margin: 0;
     margin-top: 5px;
-    color: $grey;
+    color: var(--grey);
     pointer-events: all;
 }
 
@@ -89,7 +89,7 @@
 }
 
 .replying-to {
-    color: $fg_dark;
+    color: var(--fg_dark);
     margin: -2px 0 4px;
 
     a {
@@ -99,7 +99,7 @@
 
 .retweet-header, .pinned, .tweet-stats {
     align-content: center;
-    color: $grey;
+    color: var(--grey);
     display: flex;
     flex-shrink: 0;
     flex-wrap: wrap;
@@ -134,9 +134,9 @@
     width: 100%;
     height: 100%;
     padding: 12px;
-    border: solid 1px $dark_grey;
+    border: solid 1px var(--dark_grey);
     border-radius: 10px;
-    background-color: $bg_color;
+    background-color: var(--bg_color);
 }
 
 .tweet-link {
@@ -147,6 +147,6 @@
     position: absolute;
 
     &:hover {
-        background-color: #1a1a1a;
+        background-color: var(--bg_hover);
     }
 }
diff --git a/src/sass/tweet/card.scss b/src/sass/tweet/card.scss
index 11039f7..7ebd37e 100644
--- a/src/sass/tweet/card.scss
+++ b/src/sass/tweet/card.scss
@@ -10,15 +10,15 @@
     border-radius: 10px;
     border-width: 1px;
     border-style: solid;
-    border-color: $dark_grey;
-    background-color: $bg_elements;
+    border-color: var(--dark_grey);
+    background-color: var(--bg_elements);
     overflow: hidden;
     color: inherit;
     display: flex;
     text-decoration: none !important;
 
     &:hover {
-        border-color: $grey;
+        border-color: var(--grey);
     }
 
     .attachments {
@@ -43,7 +43,7 @@
 
 .card-destination {
     @include ellipsis;
-    color: $grey;
+    color: var(--grey);
     display: block;
 }
 
@@ -73,7 +73,7 @@
     left: 0;
     bottom: 0;
     right: 0;
-    background-color: $fg_color;
+    background-color: var(--fg_color);
 
     img {
         width: 100%;
@@ -107,7 +107,7 @@
     .card-image {
         position: unset;
         border-style: solid;
-        border-color: $dark_grey;
+        border-color: var(--dark_grey);
         border-width: 0;
         border-bottom-width: 1px;
     }
diff --git a/src/sass/tweet/media.scss b/src/sass/tweet/media.scss
index 921f85d..61ca4b0 100644
--- a/src/sass/tweet/media.scss
+++ b/src/sass/tweet/media.scss
@@ -26,7 +26,7 @@
     border-radius: 7px;
     overflow: hidden;
     flex-flow: column;
-    background-color: $bg_color;
+    background-color: var(--bg_color);
     align-items: center;
     pointer-events: all;
 
@@ -81,13 +81,13 @@
 
 .overlay-circle {
     border-radius: 50%;
-    background-color: $dark_grey;
+    background-color: var(--dark_grey);
     width: 40px;
     height: 40px;
     align-items: center;
     display: flex;
     border-width: 5px;
-    border-color: $play_button_red;
+    border-color: var(--play_button_red);
     border-style: solid;
 }
 
@@ -96,7 +96,7 @@
     height: 0;
     border-style: solid;
     border-width: 12px 0 12px 17px;
-    border-color: transparent transparent transparent $play_button_red;
+    border-color: transparent transparent transparent var(--play_button_red);
     margin-left: 14px;
 }
 
diff --git a/src/sass/tweet/poll.scss b/src/sass/tweet/poll.scss
index 2709ba5..57590c8 100644
--- a/src/sass/tweet/poll.scss
+++ b/src/sass/tweet/poll.scss
@@ -5,7 +5,7 @@
     position: relative;
     margin: 6px 0;
     height: 26px;
-    background: $bg_color;
+    background: var(--bg_color);
     border-radius: 5px;
     display: flex;
     align-items: center;
@@ -14,7 +14,7 @@
 .poll-choice-bar {
     height: 100%;
     position: absolute;
-    background: $dark_grey;
+    background: var(--dark_grey);
 }
 
 .poll-choice-value {
@@ -33,10 +33,10 @@
 }
 
 .poll-info {
-    color: $grey;
+    color: var(--grey);
     pointer-events: all;
 }
 
 .leader .poll-choice-bar {
-    background: $accent_dark;
+    background: var(--accent_dark);
 }
diff --git a/src/sass/tweet/quote.scss b/src/sass/tweet/quote.scss
index 7c435bc..02e9b56 100644
--- a/src/sass/tweet/quote.scss
+++ b/src/sass/tweet/quote.scss
@@ -2,20 +2,20 @@
 
 .quote {
     margin-top: 10px;
-    border: solid 1px $dark_grey;
+    border: solid 1px var(--dark_grey);
     border-radius: 10px;
-    background-color: $bg_elements;
+    background-color: var(--bg_elements);
     overflow: auto;
     padding: 6px;
     position: relative;
     pointer-events: all;
 
     &:hover {
-        border-color: $grey;
+        border-color: var(--grey);
     }
 
     &.unavailable:hover {
-        border-color: $dark_grey;
+        border-color: var(--dark_grey);
     }
 }
 
@@ -85,7 +85,7 @@
 }
 
 .quote-sensitive {
-    background: $darker_grey;
+    background: var(--darker_grey);
     width: 102px;
     height: 102px;
     border-radius: 12px;
@@ -96,7 +96,7 @@
 
 .quote-sensitive-icon {
     font-size: 40px;
-    color: $grey;
+    color: var(--grey);
 }
 
 @media(max-width: 600px) {
diff --git a/src/sass/tweet/thread.scss b/src/sass/tweet/thread.scss
index 5557684..5dd3cc2 100644
--- a/src/sass/tweet/thread.scss
+++ b/src/sass/tweet/thread.scss
@@ -11,7 +11,7 @@
 
 .main-thread {
     margin-bottom: 20px;
-    background-color: $bg_panel;
+    background-color: var(--bg_panel);
 }
 
 .main-tweet, .replies {
@@ -24,14 +24,14 @@
 }
 
 .reply {
-    background-color: $bg_panel;
+    background-color: var(--bg_panel);
     margin-bottom: 10px;
 }
 
 .thread-line {
     .timeline-item::before,
     &.timeline-item::before {
-        background: $accent_dark;
+        background: var(--accent_dark);
         content: '';
         position: relative;
         min-width: 3px;
@@ -53,7 +53,7 @@
     .more-replies::before {
         content: '...';
         background: unset;
-        color: $more_replies_dots;
+        color: var(--more_replies_dots);
         font-weight: bold;
         font-size: 20px;
         line-height: 0.25em;

From 9aa4ddb30b0a637046bc3e6524ed24c8e148cbdb Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 11:47:20 +0200
Subject: [PATCH 02/14] Fix navbar icon color

---
 src/sass/include/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss
index d5c71f7..0b73223 100644
--- a/src/sass/include/_variables.scss
+++ b/src/sass/include/_variables.scss
@@ -3,7 +3,7 @@ $bg_color: #0F0F0F;
 $fg_color: #F8F8F2;
 $fg_faded: #F8F8F2CF;
 $fg_dark: #9d9da0;
-$fg_nav: #000000;
+$fg_nav: #FF6C60;
 
 $bg_panel: #161616;
 $bg_elements: #121212;

From 5630a4da32e81575daafda24d6787acccc5cc125 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 11:48:08 +0200
Subject: [PATCH 03/14] Add theme option

---
 src/prefs_impl.nim         |  7 ++++++-
 src/routes/preferences.nim |  8 ++++++--
 src/views/general.nim      |  2 ++
 src/views/preferences.nim  | 10 +++++++---
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/prefs_impl.nim b/src/prefs_impl.nim
index 96f8479..4978b70 100644
--- a/src/prefs_impl.nim
+++ b/src/prefs_impl.nim
@@ -51,6 +51,9 @@ const prefList*: OrderedTable[string, seq[Pref]] = {
   ],
 
   "Display": @[
+    Pref(kind: select, name: "theme", label: "Theme",
+         defaultOption: "Dark"),
+
     Pref(kind: checkbox, name: "hideTweetStats",
          label: "Hide tweet stats (replies, retweets, likes)",
          defaultState: false),
@@ -94,10 +97,12 @@ macro genUpdatePrefs*(): untyped =
     of input:
       result.add quote do: prefs.`ident` = xmltree.escape(strip(`value`))
     of select:
+      let name = pref.name
       let options = pref.options
       let default = pref.defaultOption
       result.add quote do:
-        if `value` in `options`: prefs.`ident` = `value`
+        if `name` == "theme": prefs.`ident` = `value`
+        elif `value` in `options`: prefs.`ident` = `value`
         else: prefs.`ident` = `default`
 
   result.add quote do:
diff --git a/src/routes/preferences.nim b/src/routes/preferences.nim
index 47bd5c3..6bba29d 100644
--- a/src/routes/preferences.nim
+++ b/src/routes/preferences.nim
@@ -1,4 +1,4 @@
-import strutils, uri
+import strutils, uri, os
 
 import jester
 
@@ -8,13 +8,17 @@ import ../views/[general, preferences]
 
 export preferences
 
+proc findThemes*(dir: string): seq[string] =
+  for kind, path in walkDir(dir / "css" / "themes"):
+    result.add path.splitFile.name.capitalizeAscii
+
 proc createPrefRouter*(cfg: Config) =
   router preferences:
     template savePrefs(): untyped =
       setCookie("preferences", $prefs.id, daysForward(360), httpOnly=true, secure=cfg.useHttps)
 
     get "/settings":
-      let html = renderPreferences(cookiePrefs(), refPath())
+      let html = renderPreferences(cookiePrefs(), refPath(), findThemes(cfg.staticDir))
       resp renderMain(html, request, cfg, "Preferences")
 
     get "/settings/@i?":
diff --git a/src/views/general.nim b/src/views/general.nim
index af650e7..e0433aa 100644
--- a/src/views/general.nim
+++ b/src/views/general.nim
@@ -30,10 +30,12 @@ proc renderNavbar*(title, rss: string; req: Request): VNode =
 proc renderMain*(body: VNode; req: Request; cfg: Config; titleText=""; desc="";
                  rss=""; `type`="article"; video=""; images: seq[string] = @[]): string =
   let prefs = getPrefs(req.cookies.getOrDefault("preferences"), cfg.hostname)
+  let theme = "/css/themes/" & toLowerAscii(prefs.theme) & ".css"
   let node = buildHtml(html(lang="en")):
     head:
       link(rel="stylesheet", `type`="text/css", href="/css/style.css")
       link(rel="stylesheet", `type`="text/css", href="/css/fontello.css")
+      link(rel="stylesheet", `type`="text/css", href=theme)
 
       link(rel="apple-touch-icon", sizes="180x180", href="/apple-touch-icon.png")
       link(rel="icon", type="image/png", sizes="32x32", href="/favicon-32x32.png")
diff --git a/src/views/preferences.nim b/src/views/preferences.nim
index c503cbc..7a415f6 100644
--- a/src/views/preferences.nim
+++ b/src/views/preferences.nim
@@ -1,4 +1,4 @@
-import tables, macros, strutils
+import tables, macros, strutils, os
 import karax/[karaxdsl, vdom, vstyles]
 
 import renderutils
@@ -22,12 +22,16 @@ macro renderPrefs*(): untyped =
 
       case pref.kind
       of checkbox: discard
-      of select: stmt[0].add newLit(pref.options)
       of input: stmt[0].add newLit(pref.placeholder)
+      of select:
+        if pref.name == "theme":
+          stmt[0].add ident("themes")
+        else:
+          stmt[0].add newLit(pref.options)
 
       result[2].add stmt
 
-proc renderPreferences*(prefs: Prefs; path: string): VNode =
+proc renderPreferences*(prefs: Prefs; path: string; themes: seq[string]): VNode =
   buildHtml(tdiv(class="overlay-panel")):
     fieldset(class="preferences"):
       form(`method`="post", action="/saveprefs"):

From 6481004940e4080d16dafc5556885a636ff95d8d Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 11:48:47 +0200
Subject: [PATCH 04/14] Add dark and light themes

---
 public/css/themes/dark.css  | 30 ++++++++++++++++++++++++++++++
 public/css/themes/light.css | 30 ++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 public/css/themes/dark.css
 create mode 100644 public/css/themes/light.css

diff --git a/public/css/themes/dark.css b/public/css/themes/dark.css
new file mode 100644
index 0000000..a15d181
--- /dev/null
+++ b/public/css/themes/dark.css
@@ -0,0 +1,30 @@
+body {
+    --bg_color: #0F0F0F;
+    --fg_color: #F8F8F2;
+    --fg_faded: #F8F8F2CF;
+    --fg_dark: #9d9da0;
+    --fg_nav: #FF6C60;
+
+    --bg_panel: #161616;
+    --bg_elements: #121212;
+    --bg_overlays: #1F1F1F;
+    --bg_hover: #1A1A1A;
+
+    --grey: #888889;
+    --dark_grey: #404040;
+    --darker_grey: #282828;
+    --darkest_grey: #222222;
+    --border_grey: #3E3E35;
+
+    --accent: #FF6C60;
+    --accent_light: #FFACA0;
+    --accent_dark: #8A3731;
+    --accent_border: #FF6C6091;
+
+    --play_button_red: #D8574D;
+    --more_replies_dots: #AD433B;
+    --error_red: #420A05;
+
+    --verified_blue: #1DA1F2;
+    --icon_text: #F8F8F2;
+}
diff --git a/public/css/themes/light.css b/public/css/themes/light.css
new file mode 100644
index 0000000..3171be5
--- /dev/null
+++ b/public/css/themes/light.css
@@ -0,0 +1,30 @@
+body {
+    --bg_color: #e6ecf0;
+    --fg_color: #0F0F0F;
+    --fg_faded: #161616;
+    --fg_dark: #191919;
+    --fg_nav: #000000;
+
+    --bg_panel: #ffffff;
+    --bg_elements: #fdfdfd;
+    --bg_overlays: #ffffff;
+    --bg_hover: #f5f8fa;
+
+    --grey: #657786;
+    --dark_grey: #d6d6d6;
+    --darker_grey: #cecece;
+    --darkest_grey: #e8e8e8;
+    --border_grey: #e6ecf0;
+
+    --accent: #657786;
+    --accent_light: #a0edff;
+    --accent_dark: #1DA1F2;
+    --accent_border: #1da1f296;
+
+    --play_button_red: #4db8d8;
+    --more_replies_dots: #0199f7;
+    --error_red: #ff7266;
+
+    --verified_blue: #1DA1F2;
+    --icon_text: #FFFFFF;
+}

From d4b86fd0f8345a705abc8bb4121c34083eb4b3cb Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:05:08 +0200
Subject: [PATCH 05/14] Style select element

---
 src/sass/inputs.scss      | 13 ++++++++++++-
 src/views/renderutils.nim |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss
index 0cf372d..a06343f 100644
--- a/src/sass/inputs.scss
+++ b/src/sass/inputs.scss
@@ -13,7 +13,8 @@ button {
 }
 
 input[type="text"],
-input[type="date"] {
+input[type="date"],
+select {
     @include input-colors;
     background-color: var(--bg_elements);
     padding: 1px 4px;
@@ -143,6 +144,16 @@ input::-webkit-datetime-edit-year-field:focus {
         padding-right: 135px;
     }
 
+    select {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: block;
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        appearance: none;
+    }
+
     input[type="text"] {
         position: absolute;
         right: 0;
diff --git a/src/views/renderutils.nim b/src/views/renderutils.nim
index 7612acb..dc2194a 100644
--- a/src/views/renderutils.nim
+++ b/src/views/renderutils.nim
@@ -71,7 +71,7 @@ proc genInput*(pref, label, state, placeholder: string; class=""; autofocus=fals
     verbatim &"<input name={pref} type=\"text\" placeholder=\"{p}\" value=\"{s}\" {a}/>"
 
 proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
-  buildHtml(tdiv(class="pref-group")):
+  buildHtml(tdiv(class="pref-group pref-input")):
     label(`for`=pref): text label
     select(name=pref):
       for opt in options:

From 4a5d99974c964dc77700a9e58ab4d82d183fd7f1 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:16:21 +0200
Subject: [PATCH 06/14] Update readme

---
 README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 5819442..62e882b 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Inspired by the [invidio.us](https://github.com/omarroth/invidious) project.
 - Prevents Twitter from tracking your IP or JavaScript fingerprint
 - Unofficial API (no rate limits or developer account required)
 - AGPLv3 licensed, no proprietary instances permitted
-- Dark theme
+- Themes
 - Lightweight (for [@nim_lang](https://twitter.com/nim_lang), 36KB vs 580KB from twitter.com)
 - Native RSS feeds
 - Mobile support (responsive design)
@@ -21,7 +21,6 @@ Inspired by the [invidio.us](https://github.com/omarroth/invidious) project.
 - More caching (waiting for [moigagoo/norm#19](https://github.com/moigagoo/norm/pull/19))
 - Simple account system with customizable feed
 - Json API endpoints
-- Themes
 - Nitter logo
 - Emoji support (WIP, uses native font for now)
 

From 4f746193a03187f9dda7551f38b656fde07f7fe7 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:32:23 +0200
Subject: [PATCH 07/14] Add simple migration for theme preference

---
 src/prefs.nim | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/prefs.nim b/src/prefs.nim
index 0319f7f..7656f08 100644
--- a/src/prefs.nim
+++ b/src/prefs.nim
@@ -14,6 +14,10 @@ static:
   if missing.len > 0:
     raiseAssert("{$1} missing from the Prefs type" % missing.join(", "))
 
+template safeAddColumn(field: typedesc): untyped =
+  try: field.addColumn
+  except DbError: discard
+
 dbFromTypes("prefs.db", "", "", "", [Prefs])
 
 withDb:
@@ -21,6 +25,7 @@ withDb:
     createTables()
   except DbError:
     discard
+  Prefs.theme.safeAddColumn
 
 proc getDefaultPrefs(hostname: string): Prefs =
   result = genDefaultPrefs()

From ac0e0b5e0de84d2920e364502b8152ad05e29219 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:32:37 +0200
Subject: [PATCH 08/14] Finalize theme support

---
 public/css/themes/light.css | 28 ++++++++++++++--------------
 src/routes/preferences.nim  |  3 ++-
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/public/css/themes/light.css b/public/css/themes/light.css
index 3171be5..53bc51e 100644
--- a/public/css/themes/light.css
+++ b/public/css/themes/light.css
@@ -1,29 +1,29 @@
 body {
-    --bg_color: #e6ecf0;
+    --bg_color: #E6ECF0;
     --fg_color: #0F0F0F;
     --fg_faded: #161616;
     --fg_dark: #191919;
     --fg_nav: #000000;
 
-    --bg_panel: #ffffff;
-    --bg_elements: #fdfdfd;
-    --bg_overlays: #ffffff;
-    --bg_hover: #f5f8fa;
+    --bg_panel: #FFFFFF;
+    --bg_elements: #FDFDFD;
+    --bg_overlays: #FFFFFF;
+    --bg_hover: #F5F8FA;
 
     --grey: #657786;
-    --dark_grey: #d6d6d6;
-    --darker_grey: #cecece;
-    --darkest_grey: #e8e8e8;
-    --border_grey: #e6ecf0;
+    --dark_grey: #D6D6D6;
+    --darker_grey: #CECECE;
+    --darkest_grey: #E8E8E8;
+    --border_grey: #E6ECF0;
 
-    --accent: #657786;
-    --accent_light: #a0edff;
+    --accent: #313131;
+    --accent_light: #A0EDFF;
     --accent_dark: #1DA1F2;
-    --accent_border: #1da1f296;
+    --accent_border: #1DA1F296;
 
-    --play_button_red: #4db8d8;
+    --play_button_red: #4DB8D8;
     --more_replies_dots: #0199f7;
-    --error_red: #ff7266;
+    --error_red: #FF7266;
 
     --verified_blue: #1DA1F2;
     --icon_text: #FFFFFF;
diff --git a/src/routes/preferences.nim b/src/routes/preferences.nim
index 6bba29d..d019942 100644
--- a/src/routes/preferences.nim
+++ b/src/routes/preferences.nim
@@ -1,4 +1,4 @@
-import strutils, uri, os
+import strutils, uri, os, algorithm
 
 import jester
 
@@ -11,6 +11,7 @@ export preferences
 proc findThemes*(dir: string): seq[string] =
   for kind, path in walkDir(dir / "css" / "themes"):
     result.add path.splitFile.name.capitalizeAscii
+  reverse(result)
 
 proc createPrefRouter*(cfg: Config) =
   router preferences:

From 1bba0096561d58e362efd593da9af906ee01cb23 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:46:46 +0200
Subject: [PATCH 09/14] Tweak light theme

---
 public/css/themes/light.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/css/themes/light.css b/public/css/themes/light.css
index 53bc51e..ea144bb 100644
--- a/public/css/themes/light.css
+++ b/public/css/themes/light.css
@@ -3,7 +3,7 @@ body {
     --fg_color: #0F0F0F;
     --fg_faded: #161616;
     --fg_dark: #191919;
-    --fg_nav: #000000;
+    --fg_nav: #1DA1F2;
 
     --bg_panel: #FFFFFF;
     --bg_elements: #FDFDFD;
@@ -16,12 +16,12 @@ body {
     --darkest_grey: #E8E8E8;
     --border_grey: #E6ECF0;
 
-    --accent: #313131;
+    --accent: #4E4E4E;
     --accent_light: #A0EDFF;
     --accent_dark: #1DA1F2;
     --accent_border: #1DA1F296;
 
-    --play_button_red: #4DB8D8;
+    --play_button_red: #d84d4d;
     --more_replies_dots: #0199f7;
     --error_red: #FF7266;
 

From aaf079a141379678ac115d315c64f2d361ebc414 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:46:52 +0200
Subject: [PATCH 10/14] Alphabetize theme order

---
 src/routes/preferences.nim | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/preferences.nim b/src/routes/preferences.nim
index d019942..233b94c 100644
--- a/src/routes/preferences.nim
+++ b/src/routes/preferences.nim
@@ -11,7 +11,7 @@ export preferences
 proc findThemes*(dir: string): seq[string] =
   for kind, path in walkDir(dir / "css" / "themes"):
     result.add path.splitFile.name.capitalizeAscii
-  reverse(result)
+  sort(result)
 
 proc createPrefRouter*(cfg: Config) =
   router preferences:

From a3ca693dbe3cbbf046f531aa7be8eb1faf518aeb Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 12:47:01 +0200
Subject: [PATCH 11/14] Require latest norm version

---
 nitter.nimble | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nitter.nimble b/nitter.nimble
index 287c62e..ed1e4a7 100644
--- a/nitter.nimble
+++ b/nitter.nimble
@@ -11,7 +11,7 @@ bin           = @["nitter"]
 # Dependencies
 
 requires "nim >= 0.19.9"
-requires "norm >= 1.0.17"
+requires "norm#head"
 requires "https://github.com/dom96/httpbeast#head"
 requires "jester >= 0.4.3"
 requires "regex >= 0.11.2"

From 64d2d39424ee4e7fc018d2bfe450d637e355bdf7 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 13:58:10 +0200
Subject: [PATCH 12/14] Tweak light theme to resemble Twitter more

---
 public/css/themes/light.css      | 29 ++++++++++++++++++-----------
 src/sass/general.scss            |  4 ----
 src/sass/include/_mixins.css     |  4 ++--
 src/sass/include/_variables.scss | 11 ++++++++---
 src/sass/index.scss              |  9 ++++++++-
 src/sass/profile/card.scss       |  2 ++
 src/sass/timeline.scss           | 10 +++++-----
 src/sass/tweet/_base.scss        |  6 +++++-
 src/sass/tweet/media.scss        |  4 ++--
 9 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/public/css/themes/light.css b/public/css/themes/light.css
index ea144bb..1f22516 100644
--- a/public/css/themes/light.css
+++ b/public/css/themes/light.css
@@ -1,30 +1,37 @@
 body {
     --bg_color: #E6ECF0;
     --fg_color: #0F0F0F;
-    --fg_faded: #161616;
-    --fg_dark: #191919;
-    --fg_nav: #1DA1F2;
+    --fg_faded: #657786;
+    --fg_dark: var(--fg_faded);
+    --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;
-    --more_replies_dots: #0199f7;
+    --play_button: #D84D4D;
+    --play_button_hover: #FF6C60;
+
+    --more_replies_dots: #0199F7;
     --error_red: #FF7266;
 
-    --verified_blue: #1DA1F2;
-    --icon_text: #FFFFFF;
+    --verified_blue: var(--accent);
+    --icon_text: ##F8F8F2;
+
+    --tab: var(--accent);
+    --tab_selected: #000000;
+
+    --profile_stat: var(--fg_dark);
 }
diff --git a/src/sass/general.scss b/src/sass/general.scss
index 5098b43..c4759b0 100644
--- a/src/sass/general.scss
+++ b/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));
 
diff --git a/src/sass/include/_mixins.css b/src/sass/include/_mixins.css
index ab01f05..94e11ee 100644
--- a/src/sass/include/_mixins.css
+++ b/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);
         }
     }
 }
diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss
index 0b73223..b0a6993 100644
--- a/src/sass/include/_variables.scss
+++ b/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);
diff --git a/src/sass/index.scss b/src/sass/index.scss
index 44501f4..ba675a7 100644
--- a/src/sass/index.scss
+++ b/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;
diff --git a/src/sass/profile/card.scss b/src/sass/profile/card.scss
index fc89362..f775a0b 100644
--- a/src/sass/profile/card.scss
+++ b/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) {
diff --git a/src/sass/timeline.scss b/src/sass/timeline.scss
index 9d0fd78..02e4423 100644
--- a/src/sass/timeline.scss
+++ b/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);
-            color: var(--accent);
+            border-bottom-color: var(--tab_selected);
+            color: var(--tab_selected);
         }
     }
 
     &.active a {
-        border-bottom-color: var(--accent);
-        color: var(--accent);
+        border-bottom-color: var(--tab_selected);
+        color: var(--tab_selected);
     }
 
     &.wide {
diff --git a/src/sass/tweet/_base.scss b/src/sass/tweet/_base.scss
index 2a5ea17..add0d5b 100644
--- a/src/sass/tweet/_base.scss
+++ b/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 {
diff --git a/src/sass/tweet/media.scss b/src/sass/tweet/media.scss
index 61ca4b0..f29c717 100644
--- a/src/sass/tweet/media.scss
+++ b/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;
 }
 

From b018dbdf27538b9190a60e6889bd5e565e37c813 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 13:58:28 +0200
Subject: [PATCH 13/14] Cleanup themes

---
 public/css/themes/dark.css       | 29 +-----------------------
 src/sass/include/_variables.scss | 38 --------------------------------
 2 files changed, 1 insertion(+), 66 deletions(-)

diff --git a/public/css/themes/dark.css b/public/css/themes/dark.css
index a15d181..a44b29c 100644
--- a/public/css/themes/dark.css
+++ b/public/css/themes/dark.css
@@ -1,30 +1,3 @@
 body {
-    --bg_color: #0F0F0F;
-    --fg_color: #F8F8F2;
-    --fg_faded: #F8F8F2CF;
-    --fg_dark: #9d9da0;
-    --fg_nav: #FF6C60;
-
-    --bg_panel: #161616;
-    --bg_elements: #121212;
-    --bg_overlays: #1F1F1F;
-    --bg_hover: #1A1A1A;
-
-    --grey: #888889;
-    --dark_grey: #404040;
-    --darker_grey: #282828;
-    --darkest_grey: #222222;
-    --border_grey: #3E3E35;
-
-    --accent: #FF6C60;
-    --accent_light: #FFACA0;
-    --accent_dark: #8A3731;
-    --accent_border: #FF6C6091;
-
-    --play_button_red: #D8574D;
-    --more_replies_dots: #AD433B;
-    --error_red: #420A05;
-
-    --verified_blue: #1DA1F2;
-    --icon_text: #F8F8F2;
+    /* uses default values */
 }
diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss
index b0a6993..0f81235 100644
--- a/src/sass/include/_variables.scss
+++ b/src/sass/include/_variables.scss
@@ -42,41 +42,3 @@ $font_1: Helvetica;
 $font_2: Arial;
 $font_3: sans-serif;
 $font_4: fontello;
-
-//theme
-$variables: (
-    --bg_color: var(--bg_color),
-    --fg_color: var(--fg_color),
-    --fg_faded: var(--fg_faded),
-    --fg_dark: var(--fg_dark),
-    --fg_nav: var(--fg_nav),
-
-    --bg_panel: var(--bg_panel),
-    --bg_elements: var(--bg_elements),
-    --bg_overlays: var(--bg_overlays),
-    --bg_hover: var(--bg_hover),
-
-    --grey: var(--grey),
-    --dark_grey: var(--dark_grey),
-    --darker_grey: var(--darker_grey),
-    --darkest_grey: var(--darkest_grey),
-    --border_grey: var(--border_grey),
-
-    --accent: var(--accent),
-    --accent_light: var(--accent_light),
-    --accent_dark: var(--accent_dark),
-    --accent_border: var(--accent_border),
-
-    --play_button_red: var(--play_button_red),
-    --more_replies_dots: var(--more_replies_dots),
-    --error_red: var(--error_red),
-
-    --verified_blue: var(--verified_blue),
-    --icon_text: var(--icon_text)
-);
-
-/*** theme helper ***/
-
-@function var($variable) {
-    @return map-get($variables, $variable);
-}

From 3e661bab8a6bfaccdb6bccc707d1dd32a15f26e2 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Wed, 23 Oct 2019 14:06:47 +0200
Subject: [PATCH 14/14] Add defaultTheme config option

---
 nitter.conf                 |  3 +++
 src/config.nim              |  4 +++-
 src/prefs.nim               | 15 ++++++++-------
 src/routes/preferences.nim  |  2 +-
 src/routes/router_utils.nim |  2 +-
 src/types.nim               |  1 +
 src/views/general.nim       |  2 +-
 7 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/nitter.conf b/nitter.conf
index 857b9f0..e957e68 100644
--- a/nitter.conf
+++ b/nitter.conf
@@ -9,3 +9,6 @@ hostname = "nitter.net"
 [Cache]
 directory = "./tmp"
 profileMinutes = 10  # how long to cache profiles
+
+[Config]
+defaultTheme = "Dark"
diff --git a/src/config.nim b/src/config.nim
index ea62b1c..359d872 100644
--- a/src/config.nim
+++ b/src/config.nim
@@ -21,5 +21,7 @@ proc getConfig*(path: string): Config =
     hostname: cfg.get("Server", "hostname", "nitter.net"),
 
     cacheDir: cfg.get("Cache", "directory", "/tmp/nitter"),
-    profileCacheTime: cfg.get("Cache", "profileMinutes", 10)
+    profileCacheTime: cfg.get("Cache", "profileMinutes", 10),
+
+    defaultTheme: cfg.get("Config", "defaultTheme", "Dark")
   )
diff --git a/src/prefs.nim b/src/prefs.nim
index 7656f08..8abba26 100644
--- a/src/prefs.nim
+++ b/src/prefs.nim
@@ -27,9 +27,10 @@ withDb:
     discard
   Prefs.theme.safeAddColumn
 
-proc getDefaultPrefs(hostname: string): Prefs =
+proc getDefaultPrefs(cfg: Config): Prefs =
   result = genDefaultPrefs()
-  result.replaceTwitter = hostname
+  result.replaceTwitter = cfg.hostname
+  result.theme = cfg.defaultTheme
 
 proc cache*(prefs: var Prefs) =
   withDb:
@@ -40,18 +41,18 @@ proc cache*(prefs: var Prefs) =
     except AssertionError, KeyError:
       prefs.insert()
 
-proc getPrefs*(id, hostname: string): Prefs =
+proc getPrefs*(id: string; cfg: Config): Prefs =
   if id.len == 0:
-    return getDefaultPrefs(hostname)
+    return getDefaultPrefs(cfg)
 
   withDb:
     try:
       result.getOne("id = ?", id)
     except KeyError:
-      result = getDefaultPrefs(hostname)
+      result = getDefaultPrefs(cfg)
 
-proc resetPrefs*(prefs: var Prefs; hostname: string) =
-  var defPrefs = getDefaultPrefs(hostname)
+proc resetPrefs*(prefs: var Prefs; cfg: Config) =
+  var defPrefs = getDefaultPrefs(cfg)
   defPrefs.id = prefs.id
   cache(defPrefs)
   prefs = defPrefs
diff --git a/src/routes/preferences.nim b/src/routes/preferences.nim
index 233b94c..96cd51e 100644
--- a/src/routes/preferences.nim
+++ b/src/routes/preferences.nim
@@ -33,7 +33,7 @@ proc createPrefRouter*(cfg: Config) =
 
     post "/resetprefs":
       var prefs = cookiePrefs()
-      resetPrefs(prefs, cfg.hostname)
+      resetPrefs(prefs, cfg)
       savePrefs()
       redirect($(parseUri("/settings") ? filterParams(request.params)))
 
diff --git a/src/routes/router_utils.nim b/src/routes/router_utils.nim
index 44ffba8..2aedd6c 100644
--- a/src/routes/router_utils.nim
+++ b/src/routes/router_utils.nim
@@ -2,7 +2,7 @@ import ../utils, ../prefs
 export utils, prefs
 
 template cookiePrefs*(): untyped {.dirty.} =
-  getPrefs(request.cookies.getOrDefault("preferences"), cfg.hostname)
+  getPrefs(request.cookies.getOrDefault("preferences"), cfg)
 
 template getPath*(): untyped {.dirty.} =
   $(parseUri(request.path) ? filterParams(request.params))
diff --git a/src/types.nim b/src/types.nim
index d4965fd..c0d9492 100644
--- a/src/types.nim
+++ b/src/types.nim
@@ -177,6 +177,7 @@ type
     hostname*: string
     cacheDir*: string
     profileCacheTime*: int
+    defaultTheme*: string
 
 proc contains*(thread: Chain; tweet: Tweet): bool =
   thread.content.anyIt(it.id == tweet.id)
diff --git a/src/views/general.nim b/src/views/general.nim
index e0433aa..49f911a 100644
--- a/src/views/general.nim
+++ b/src/views/general.nim
@@ -29,7 +29,7 @@ proc renderNavbar*(title, rss: string; req: Request): VNode =
 
 proc renderMain*(body: VNode; req: Request; cfg: Config; titleText=""; desc="";
                  rss=""; `type`="article"; video=""; images: seq[string] = @[]): string =
-  let prefs = getPrefs(req.cookies.getOrDefault("preferences"), cfg.hostname)
+  let prefs = getPrefs(req.cookies.getOrDefault("preferences"), cfg)
   let theme = "/css/themes/" & toLowerAscii(prefs.theme) & ".css"
   let node = buildHtml(html(lang="en")):
     head: