Replaced raw values with variables

src/ui/scss/component/_badge.scss

@@ -9,7 +9,7 @@
   }
 
   [data-mode='dark'] & {
-    color: #ddd;
+    color: var(--dm-color-01);
     background-color: rgba($lbry-teal-5, 0.3);
   }
 }

src/ui/scss/component/_card.scss

@@ -8,7 +8,7 @@
   font-size: 1.25rem;
 
   [data-mode='dark'] & {
-    background-color: #353434;
+    background-color: var(--dm-color-05);
     box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%);
   }
 }

src/ui/scss/component/_claim-list.scss

@@ -32,7 +32,7 @@
   }
 
   [data-mode='dark'] & {
-    color: #ddd;
+    color: var(--dm-color-01);
   }
 }
 
@@ -57,7 +57,7 @@
   background-color: lighten($lbry-black, 10%);
 
   [data-mode='dark'] & {
-    color: #ddd;
+    color: var(--dm-color-01);
   }
 }
 
@@ -66,7 +66,7 @@
   background-color: lighten($lbry-black, 10%);
 
   [data-mode='dark'] & {
-    background-color: #252424;
+    background-color: var(--dm-color-07);
   }
 }
 
@@ -93,7 +93,7 @@
     background-color: darken($lbry-white, 5%);
 
     [data-mode='dark'] & {
-      background-color: #555254;
+      background-color: var(--dm-color-04);
     }
   }
 
@@ -115,7 +115,7 @@
   border-bottom: 1px solid rgba($lbry-teal-5, 0.1);
 
   [data-mode='dark'] & {
-    border-bottom: 1px solid #555254;
+    border-top: 1px solid var(--dm-color-04);
   }
 }
 

src/ui/scss/component/_expandable.scss

@@ -4,7 +4,7 @@
   padding-bottom: var(--spacing-medium);
 
   [data-mode='dark'] & {
-    border-color: #555254;
+    border-color: var(--dm-color-04);
   }
 }
 
@@ -34,7 +34,7 @@
     position: absolute;
 
     [data-mode='dark'] & {
-      background-image: linear-gradient(to bottom, transparent 0%, #1e1e1e 90%);
+      background-image: linear-gradient(to bottom, transparent 0%, var(--dm-color-08) 90%);
     }
   }
 }

src/ui/scss/component/_form-field.scss

@@ -255,7 +255,7 @@ fieldset-section {
     input:not(:focus):not(.form-field--copyable),
     textarea:not(:focus),
     select:not(:focus) {
-      border-color: #555254;
+      border-color: var(--dm-color-04);
     }
   }
 }

src/ui/scss/component/_header.scss

@@ -10,8 +10,8 @@
   padding-right: var(--spacing-large);
 
   [data-mode='dark'] & {
-    background-color: #353434;
-    color: #ddd;
+    background-color: var(--dm-color-05);
+    color: var(--dm-color-01);
     border-bottom: none;
     box-shadow: var(--card-box-shadow) $lbry-black;
   }
@@ -88,7 +88,7 @@
     }
 
     svg {
-      stroke: #ddd;
+      stroke: var(--dm-color-01);
     }
   }
 }

src/ui/scss/component/_main.scss

@@ -9,7 +9,7 @@
   display: flex;
 
   [data-mode='dark'] & {
-    background-color: #1e1e1e;
+    background-color: var(--dm-color-08);
   }
 }
 

src/ui/scss/component/_media.scss

@@ -35,7 +35,7 @@
     background-size: cover;
 
     [data-mode='dark'] & {
-      background-color: #555254;
+      background-color: var(--dm-color-04);
     }
   }
 }

src/ui/scss/component/_navigation.scss

@@ -55,14 +55,16 @@
   }
 
   [data-mode='dark'] & {
-    color: #ddd;
+    color: var(--dm-color-01);
+
     svg {
-      color: #ddd;
+      color: var(--dm-color-01);
     }
 
     &:hover,
     &.navigation__link--active {
       color: $lbry-teal-4;
+
       .icon {
         color: $lbry-teal-4;
       }

src/ui/scss/component/_spinner.scss

@@ -43,7 +43,7 @@
     background-color: $lbry-white;
 
     [data-mode='dark'] & {
-      background-color: #ddd;
+      background-color: var(--dm-color-01);
     }
   }
 }

src/ui/scss/component/_wunderbar.scss

@@ -58,11 +58,11 @@
   }
 
   [data-mode='dark'] & {
-    background-color: #6a6a6a;
+    background-color: var(--dm-color-03);
     color: $lbry-white;
 
     &::placeholder {
-      color: #90908f;
+      color: var(--dm-color-02);
     }
   }
 }

src/ui/scss/init/_gui.scss

@@ -9,7 +9,7 @@ html {
   overflow-x: hidden;
 
   &[data-mode='dark'] {
-    background-color: #1e1e1e;
+    background-color: var(--dm-color-08);
   }
 }
 
@@ -24,8 +24,8 @@ body {
   background-color: mix($lbry-white, $lbry-gray-1, 70%);
 
   [data-mode='dark'] & {
-    background-color: #1e1e1e;
-    color: #ddd;
+    background-color: var(--dm-color-08);
+    color: var(--dm-color-01);
   }
 }
 
@@ -54,7 +54,7 @@ hr {
   background-color: $lbry-gray-1;
 
   [data-mode='dark'] & {
-    background-color: #555254;
+    background-color: var(--dm-color-04);
   }
 }
 
@@ -147,7 +147,7 @@ hr {
   border-radius: 5px;
 
   [data-mode='dark'] & {
-    background-color: #2e2d2e;
+    background-color: var(--dm-color-06);
     color: inherit;
   }
 }
@@ -231,7 +231,7 @@ hr {
 fieldset,
 .fieldset {
   [data-mode='dark'] & {
-    border-top-color: #555254;
+    border-top-color: var(--dm-color-04);
   }
 }
 
@@ -246,6 +246,6 @@ checkbox-toggle,
 radio-toggle,
 .radio-toggle {
   [data-mode='dark'] & {
-    border-color: #555254;
+    border-color: var(--dm-color-04);
   }
 }

src/ui/scss/init/_mixins.scss

@@ -4,7 +4,7 @@
   border-radius: var(--card-radius);
 
   [data-mode='dark'] & {
-    background-color: #555254;
+    background-color: var(--dm-color-04);
   }
 }
 

src/ui/scss/init/_vars.scss

@@ -26,6 +26,16 @@ $large-breakpoint: 1921px;
   // Color
   --color-background: #270f34;
 
+  // Dark Mode
+  --dm-color-01: #ddd;
+  --dm-color-02: #90908f;
+  --dm-color-03: #6a6a6a;
+  --dm-color-04: #555254;
+  --dm-color-05: #353434;
+  --dm-color-06: #2e2d2e;
+  --dm-color-07: #252424;
+  --dm-color-08: #1e1e1e;
+
   // Text
   --text-max-width: 660px;
   --text-link-padding: 4px;

static/locales/en.json

@@ -458,7 +458,6 @@
   "This will appear as a tip for \"Original LBRY porn - Nude Hot Girl masturbates FREE\".": "This will appear as a tip for \"Original LBRY porn - Nude Hot Girl masturbates FREE\".",
   "You sent 25 LBC as a tip, Mahalo!": "You sent 25 LBC as a tip, Mahalo!",
   "LBRY names cannot contain that symbol ($, #, @)": "LBRY names cannot contain that symbol ($, #, @)",
-  "Invalid character %s in name: %s.": "Invalid character %s in name: %s.",
   "Path copied.": "Path copied.",
   "Open Folder": "Open Folder",
   "Create Backup": "Create Backup"