Introduce $secondary-color ('blue' theme)

src/css/themes/blue/_colors.scss

@@ -1,4 +1,4 @@
 $primary-color: #569bd3;
-$primary-dark-color: #3383C3;
+$secondary-color: #3383C3;
 $accent-color: lighten($primary-color, 38%);
 $white: #FFF;

src/css/themes/blue/_layout.scss

@@ -5,13 +5,13 @@
   header {
     h1 , h1 a { color: $primary-color; }
     nav .react-select {
-      color: $primary-dark-color;
+      color: $secondary-color;
     }
     nav .react-select.language {
       ul li {
         background: $primary-color;
         color: $white;
-        border: 3px solid lighten($primary-dark-color, 5%);
+        border: 3px solid $secondary-color;
       }
     }
   }

src/css/themes/blue/components/_Icon.scss

@@ -4,14 +4,14 @@
   ul.body.stream li, footer {
     .play.icon {
       fill: $primary-color;
-      stroke: $primary-dark-color;
+      stroke: $secondary-color;
       stroke-width: 2px;
     }
 
     .pause.icon {
       rect {
         fill: $primary-color;
-        stroke: $primary-dark-color;
+        stroke: $secondary-color;
         stroke-width: 1px;
       }
     }
@@ -28,12 +28,12 @@
     }
     .right-arrow.icon {
       g {
-        fill: $primary-dark-color;
+        fill: $secondary-color;
       }
     }
   }
 
   .stalled.icon {
-    div { background: $primary-dark-color; }
+    div { background: $secondary-color; }
   }
 }

src/css/themes/blue/pages/_SurahIndex.scss

@@ -15,7 +15,7 @@
       }
 
       span.id {
-        color: $primary-dark-color;
+        color: $secondary-color;
       }
     }
   }
@@ -46,7 +46,7 @@
   @import "themes/blue/colors";
   header {
     div {
-      color: $primary-dark-color;
+      color: $secondary-color;
     }
   }
 }
@@ -56,7 +56,7 @@
   ul.body.index  {
     li.surah a {
       span.id {
-        color: $primary-dark-color;
+        color: $secondary-color;
       }
       span.name {
         color: $primary-color;

src/css/themes/blue/pages/_SurahStream.scss

@@ -3,14 +3,14 @@
 
   header {
     div {
-      .localized-name, .transliterated-name { color: $primary-dark-color; }
+      .localized-name, .transliterated-name { color: $secondary-color; }
     }
   }
 
   ul.body.stream {
     li.ayah {
       span.title span {
-        color: $primary-dark-color;
+        color: $secondary-color;
       }
       p { }
     }