2 files changed, 10 insertions, 3 deletions

diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index 3bd6a6575..82a0971eb 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -18,6 +18,12 @@ function setAppearance(style) {
   styleElement.innerHTML = style;
 }
 
+// See https://github.com/Qix-/color/issues/53#issuecomment-656590710
+function darkenAbsolute(originalColor, absoluteChange) {
+  const originalLightness = originalColor.lightness();
+  return originalColor.lightness(originalLightness - absoluteChange);
+}
+
 function generateAccentStyle(accentColorStr) {
   let style = '';
 
@@ -35,10 +41,10 @@ function generateAccentStyle(accentColorStr) {
   } catch (e) {
     // Ignore invalid accent color.
   }
-  const darkerColorStr = accentColor.darken(0.05).hex();
+  const darkerColorStr = darkenAbsolute(accentColor, 5).hex();
   style += `
     a.button:hover, button.button:hover {
-      background: ${accentColor.darken(0.1).hex()};
+      background: ${darkenAbsolute(accentColor, 10).hex()};
     }
 
     .franz-form__button:hover,
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index fb2f1c32a..31a239387 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -33,7 +33,8 @@
   width: $theme-sidebar-width;
 
   &.is-active {
-    background: lighten($theme-brand-primary, 35%);
+    background: change-color($theme-brand-primary,
+                             $lightness: min(lightness($theme-brand-primary) * 1.35, 100));
     border-left-width: 4px;
     border-left-style: solid;
     color: $theme-brand-primary;