diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index d80b75372..1bb96a6f6 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -190,16 +190,16 @@ a, a:hover,
   color: var(--bs-primary);
 }
 
+a.btn-link:hover,
+a.btn-link:active,
+a.btn-link:focus-visible,
 .btn-link:hover,
 .btn-link:active,
 .btn-link:focus-visible {
-  color: var(--pngx-primary-darken-10) !important;
-}
-
-a.btn-link:hover,
-a.btn-link:active,
-a.btn-link:focus-visible {
-  color: var(--pngx-primary-darken-5) !important;
+  color: var(--pngx-primary-lighten-10) !important;
+  .primary-light & {
+    color: var(--pngx-primary-darken-15) !important;
+  }
 }
 
 .form-control-dark {
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index ed9f41bcd..f415ed537 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -15,9 +15,9 @@ $color-mode-type: data;
   --bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
   --bs-border-color: var(--bs-gray-400);
   --pngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 76%));
+  --pngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
   --pngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%));
   --pngx-primary-darken-5: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 5%));
-  --pngx-primary-darken-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
   --pngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%));
   --pngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
   --pngx-primary-darken-27: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 27%));