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

87xie · dimaMachina · web-flow · commit 9df7f58f9db1 · 2024-08-21T23:53:46.000+02:00
* [v3] fix nav-links not highlighting on hover in dark mode

* update .changeset/polite-baboons-look.md

* fix

---------

Co-authored-by: Dimitri POSTOLOV &lt;dmytropostolov@gmail.com&gt;
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 {

Original file line number	Diff line number	Diff line change
`@@ -15,8 +15,10 @@ export type TOCProps = {`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`const linkClassName = cn(`
`18`		`- '_text-xs _font-medium _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-100',`
`19`		`- 'contrast-more:_text-gray-800 contrast-more:dark:_text-gray-50'`
	`18`	`+ '_text-xs _font-medium',`
	`19`	`+ '_text-gray-600 dark:_text-gray-400',`
	`20`	`+ 'hover:_text-gray-800 dark:hover:_text-gray-200',`
	`21`	`+ 'contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100'`
`20`	`22`	`)`
`21`	`23`
`22`	`24`	`export function TOC({ toc, filePath }: TOCProps): ReactElement {`