diff --git a/src/client/app.vue b/src/client/app.vue
index 9a984a27f..ecf437cac 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -941,6 +941,7 @@ export default Vue.extend({
 
 				&:hover {
 					text-decoration: none;
+					color: var(--navHoverFg);
 				}
 
 				&.active {
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index e4c120bf1..af5fc3b8d 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -20,6 +20,7 @@
 		header: 'rgba(20, 20, 20, 0.75)',
 		navBg: '@panel',
 		navFg: '@fg',
+		navHoverFg: ':lighten<17<@fg',
 		navActive: '@accent',
 		navIndicator: '@accent',
 		link: '#44a4c1',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 3472a268c..8c67bc402 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -20,6 +20,7 @@
 		header: 'rgba(255, 255, 255, 0.75)',
 		navBg: '@panel',
 		navFg: '@fg',
+		navHoverFg: ':darken<17<@fg',
 		navActive: '@accent',
 		navIndicator: '@accent',
 		link: '#44a4c1',