diff --git a/src/ui/scss/component/_badge.scss b/src/ui/scss/component/_badge.scss
index 9c00dc082..4ca0e8ba6 100644
--- a/src/ui/scss/component/_badge.scss
+++ b/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);
}
}
diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss
index 93ac1f190..0832d00f4 100644
--- a/src/ui/scss/component/_card.scss
+++ b/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%);
}
}
diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss
index 1789927a8..952ab0fa6 100644
--- a/src/ui/scss/component/_claim-list.scss
+++ b/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);
}
}
diff --git a/src/ui/scss/component/_expandable.scss b/src/ui/scss/component/_expandable.scss
index d788870f7..fde9977d5 100644
--- a/src/ui/scss/component/_expandable.scss
+++ b/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%);
}
}
}
diff --git a/src/ui/scss/component/_form-field.scss b/src/ui/scss/component/_form-field.scss
index 23ce502fc..f8bddebba 100644
--- a/src/ui/scss/component/_form-field.scss
+++ b/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);
}
}
}
diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss
index cb759b94b..95e7e663d 100644
--- a/src/ui/scss/component/_header.scss
+++ b/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);
}
}
}
diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss
index 86ccf7d8a..f996e5a0e 100644
--- a/src/ui/scss/component/_main.scss
+++ b/src/ui/scss/component/_main.scss
@@ -9,7 +9,7 @@
display: flex;
[data-mode='dark'] & {
- background-color: #1e1e1e;
+ background-color: var(--dm-color-08);
}
}
diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss
index c79bed5e0..bf9cbed3a 100644
--- a/src/ui/scss/component/_media.scss
+++ b/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);
}
}
}
diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss
index 3981cd687..c1bf90836 100644
--- a/src/ui/scss/component/_navigation.scss
+++ b/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;
}
diff --git a/src/ui/scss/component/_spinner.scss b/src/ui/scss/component/_spinner.scss
index 9b63c3c59..d9e3bf3b8 100644
--- a/src/ui/scss/component/_spinner.scss
+++ b/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);
}
}
}
diff --git a/src/ui/scss/component/_wunderbar.scss b/src/ui/scss/component/_wunderbar.scss
index 58045012c..e3266c463 100644
--- a/src/ui/scss/component/_wunderbar.scss
+++ b/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);
}
}
}
diff --git a/src/ui/scss/init/_gui.scss b/src/ui/scss/init/_gui.scss
index 505e99795..10d2d6534 100644
--- a/src/ui/scss/init/_gui.scss
+++ b/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);
}
}
diff --git a/src/ui/scss/init/_mixins.scss b/src/ui/scss/init/_mixins.scss
index bcaf2be8e..b00476aa7 100644
--- a/src/ui/scss/init/_mixins.scss
+++ b/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);
}
}
diff --git a/src/ui/scss/init/_vars.scss b/src/ui/scss/init/_vars.scss
index bc7fb44aa..68ed9c726 100644
--- a/src/ui/scss/init/_vars.scss
+++ b/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;
diff --git a/static/locales/en.json b/static/locales/en.json
index 95f23dcce..0572b956c 100644
--- a/static/locales/en.json
+++ b/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"