Fix/icons in dark mode (#3727)

* Add theme variables for series dots

* Use theme variables for article series icons

- The theme colour should only apply in night theme.
- The rest of the themes should remain intact.

* Refactor added styles to use themeable mixin

app/assets/stylesheets/article-show.scss

@@ -351,7 +351,11 @@ article {
       a {
         color: $black;
         padding: calc(0.3vw + 14px);
-        background: darken($lightest-gray, 12%);
+        @include themeable (
+          background,
+          theme-series-article-background,
+          darken($lightest-gray, 12%)
+        );
         display: inline-block;
         position: relative;
         z-index: 4;
@@ -364,11 +368,19 @@ article {
         }
 
         &:hover {
-          background: darken($lightest-gray, 18%);
+          @include themeable (
+            background,
+            theme-series-article-hover,
+            darken($lightest-gray, 18%)
+          );
         }
 
         &.current-article {
-          background: $black;
+          @include themeable (
+            background,
+            theme-current-article-background,
+            $black
+          );
           color: white;
         }
 
@@ -1170,8 +1182,8 @@ article {
         left: 0;
         z-index: 100;
         @include themeable(
-          background, 
-          theme-top-bar-background, 
+          background,
+          theme-top-bar-background,
           $tan
         );
         font-size: 1em;
@@ -1226,8 +1238,8 @@ article {
           a {
             font-weight: bold;
             @include themeable(
-              color, 
-              theme-color, 
+              color,
+              theme-color,
               $black
             );
             padding: 12px 18px;
@@ -1236,8 +1248,8 @@ article {
             font-size: 0.8em;
             &:hover {
               @include themeable(
-                background, 
-                theme-top-bar-background-hover, 
+                background,
+                theme-top-bar-background-hover,
                 $light-gray
               );
               }
@@ -1246,8 +1258,8 @@ article {
           &.notification-subscriptions-area-row {
             padding: 0px;
             @include themeable(
-              border-bottom, 
-              theme-container-border, 
+              border-bottom,
+              theme-container-border,
               1px solid $medium-gray
             );
           }
@@ -1262,13 +1274,13 @@ article {
               border-top-left-radius: 3px;
             }
             @include themeable-important(
-              background, 
-              theme-container-background, 
+              background,
+              theme-container-background,
               darken($tan, 3%)
             );
             @include themeable-important(
-              border-bottom, 
-              theme-subtle-border, 
+              border-bottom,
+              theme-subtle-border,
               1px solid $light-medium-gray
             );
             button.notification-subscription-label {
@@ -1279,8 +1291,8 @@ article {
               float: right !important;
               padding: 4px 0px !important;
               @include themeable-important(
-                border, 
-                theme-border, 
+                border,
+                theme-border,
                 1px solid $light-medium-gray
               );
               border-radius: 100px;
@@ -1300,14 +1312,14 @@ article {
             margin: auto !important;
             cursor: pointer !important;
             @include themeable-important(
-              color, 
-              theme-color, 
+              color,
+              theme-color,
               $black
             );
             &:hover {
               @include themeable-important(
-                background, 
-                theme-top-bar-background-hover, 
+                background,
+                theme-top-bar-background-hover,
                 $light-gray
               );
             }
@@ -1323,8 +1335,8 @@ article {
                 visibility: visible;
               }
               @include themeable-important(
-                color, 
-                theme-color, 
+                color,
+                theme-color,
                 $black
               );
             }

app/views/layouts/_user_config.html.erb

@@ -31,7 +31,10 @@
         --theme-container-box-shadow: none;\
         --theme-container-border: 1px solid #22303f;\
         --theme-subtle-border: 1px solid #1f2c3a;\
-        --theme-social-icon-invert: invert(100)</style>'
+        --theme-social-icon-invert: invert(100);\
+        --theme-current-article-background: #f5f6f7;\
+        --theme-series-article-background: #636363;\
+        --theme-series-article-hover: #848484;</style>'
     } else if (bodyClass.includes('pink-theme')) {
       document.getElementById('body-styles').innerHTML = '<style>\
       :root {\