Rewrite sass variables to support themes

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;

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);
     }
 }
 

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);
+}

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;

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 {

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;
         }
     }

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%;
     }

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;
     }
 

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;

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 {

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);
     }
 }

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;
     }

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;
 }
 

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);
 }

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) {

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;