diff --git a/src/scss/themes/cobalt.scss b/src/scss/themes/cobalt.scss
index 31348732..5fe375a6 100644
--- a/src/scss/themes/cobalt.scss
+++ b/src/scss/themes/cobalt.scss
@@ -34,4 +34,6 @@ $compose-background: lighten($main-theme-color, 32%);
   --nav-text-color-hover: #{$main-text-color};
   --nav-a-selected-border: #{$anchor-color};
   --nav-a-selected-border-hover: #{$anchor-color};
+
+  accent-color: #{lighten($main-theme-color, 15%)};
 }
diff --git a/src/scss/themes/gecko.scss b/src/scss/themes/gecko.scss
index dc4696a7..428560a8 100644
--- a/src/scss/themes/gecko.scss
+++ b/src/scss/themes/gecko.scss
@@ -12,3 +12,7 @@ $compose-background: lighten($main-theme-color, 32%);
 
 @import "_base.scss";
 @import "_light_scrollbars.scss";
+
+:root {
+  accent-color: #{darken($main-theme-color, 5%)};
+}
diff --git a/src/scss/themes/hotpants.scss b/src/scss/themes/hotpants.scss
index 1ace4d2e..b5868d0d 100644
--- a/src/scss/themes/hotpants.scss
+++ b/src/scss/themes/hotpants.scss
@@ -17,3 +17,7 @@ $scrollbar-face-active: #{lighten($main-theme-color, 10%)};
 
 @import "_base.scss";
 @import "_light_scrollbars.scss";
+
+:root {
+  accent-color: #{darken($main-theme-color, 5%)};
+}
diff --git a/src/scss/themes/riot.scss b/src/scss/themes/riot.scss
index bdb108a2..8c4ed459 100644
--- a/src/scss/themes/riot.scss
+++ b/src/scss/themes/riot.scss
@@ -15,3 +15,7 @@ $compose-background: lighten($main-theme-color, 52%);
 @import "_dark.scss";
 @import "_dark_navbar.scss";
 @import "_dark_scrollbars.scss";
+
+:root {
+  accent-color: #{darken($main-theme-color, 5%)};
+}
diff --git a/src/scss/themes/sorcery.scss b/src/scss/themes/sorcery.scss
index 0981798b..ac8707df 100644
--- a/src/scss/themes/sorcery.scss
+++ b/src/scss/themes/sorcery.scss
@@ -20,3 +20,7 @@ $scrollbar-face-active: #{lighten($main-theme-color, 1%)};
 @import "_dark.scss";
 @import "_dark_navbar.scss";
 @import "_dark_scrollbars.scss";
+
+:root {
+  accent-color: #{darken($main-theme-color, 12%)};
+}