[v3] fix nav-links not highlighting on hover in dark mode (#3109)

* [v3] fix nav-links not highlighting on hover in dark mode * update .changeset/polite-baboons-look.md * fix --------- Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
shuding · Aug 21, 2024 · 9df7f58 · 9df7f58
1 parent a90b90f
commit 9df7f58
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/.changeset/polite-baboons-look.md b/.changeset/polite-baboons-look.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+Fix nav-links not highlighting on hover in dark mode
diff --git a/packages/nextra-theme-docs/src/components/nav-links.tsx b/packages/nextra-theme-docs/src/components/nav-links.tsx
@@ -14,7 +14,10 @@ interface NavLinkProps {
 
 const classes = {
   link: cn(
-    '_flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _text-gray-600 _transition-colors [word-break:break-word] hover:_text-primary-600 dark:_text-gray-300 md:_text-lg'
+    '_text-gray-600 dark:_text-gray-400',
+    'hover:_text-gray-800 dark:hover:_text-gray-200',
+    'contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100',
+    '_flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg'
   ),
   icon: cn('_inline _h-5 _shrink-0')
 }

diff --git a/packages/nextra-theme-docs/src/components/toc.tsx b/packages/nextra-theme-docs/src/components/toc.tsx
@@ -15,8 +15,10 @@ export type TOCProps = {
 }
 
 const linkClassName = cn(
-  '_text-xs _font-medium _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-100',
-  'contrast-more:_text-gray-800 contrast-more:dark:_text-gray-50'
+  '_text-xs _font-medium',
+  '_text-gray-600 dark:_text-gray-400',
+  'hover:_text-gray-800 dark:hover:_text-gray-200',
+  'contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100'
 )
 
 export function TOC({ toc, filePath }: TOCProps): ReactElement {