Rewrite sass variables to support themes

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;