Use a lighter blue for links in dark mode

Fix Vincent-P#5
GuangDai · Oct 24, 2019 · 6b05b15 · 6b05b15
1 parent c5e7314
commit 6b05b15
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/extension/open-in-new-light.svg b/extension/open-in-new-light.svg
diff --git a/src/index.scss b/src/index.scss
@@ -23,16 +23,16 @@ body {
 }
 
 a {
-    color: var(--blue-50);
+    color: var(--link-color);
     text-decoration: none;
 
     &:hover {
-        color: var(--blue-60);
+        color: var(--link-hover-color);
         text-decoration: underline;
     }
 
     &:active {
-        color: var(--blue-70);
+        color: var(--link-active-color);
     }
 
     &:focus {
@@ -42,7 +42,7 @@ a {
 
     // display icon for external links
     &:not([class])[href*="//"]::after {
-        background-image: url(/open-in-new.svg);
+        background-image: var(--link-external-icon);
         background-repeat: no-repeat;
         background-size: 16px 16px;
         content: "";
@@ -420,7 +420,7 @@ img {
     background-color: var(--card-background-color);
     padding: var(--base-unit) calc(var(--base-unit) * 2);
     &:hover {
-        background-color: var(--ghost-button-hover-background-color);
+        background-color: var(--default-button-background-color);
         @media (prefers-color-scheme: dark) {
             background-color: var(--default-button-hover-background-color);
         }

diff --git a/src/variables.scss b/src/variables.scss
@@ -148,6 +148,10 @@ $midscreen-max-width: 1400px;
     --icon-fill-color: var(--grey-90);
     --background-cancel-icon: url(/search-cancel.svg) no-repeat center center;
 
+    --link-color: var(--blue-50);
+    --link-hover-color: var(--blue-60);
+    --link-active-color: var(--blue-70);
+    --link-external-icon: url(/open-in-new.svg);
 
     @media (prefers-color-scheme: dark) {
         --background-color: var(--grey-80);
@@ -172,5 +176,10 @@ $midscreen-max-width: 1400px;
         --secondary-icon-color: var(--grey-10-a60);
         --icon-fill-color: var(--grey-10);
         --background-cancel-icon: url(/search-cancel-light.svg) no-repeat center center;
+
+        --link-color: var(--blue-40);
+        --link-hover-color: var(--blue-50);
+        --link-active-color: var(--blue-60);
+        --link-external-icon: url(/open-in-new-light.svg);
     }
 }