Resolves dark mode contrast problems in sidebar and breadcrumbs (shud…

…ing#1886) Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru> Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
filiphuhta · May 24, 2023 · 0d7a6ed · 0d7a6ed
1 parent 1205c8a
commit 0d7a6ed
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/.changeset/warm-dingos-explain.md b/.changeset/warm-dingos-explain.md
@@ -0,0 +1,5 @@
+---
+"nextra-theme-docs": patch
+---
+
+Resolves dark mode contrast problems in sidebar and breadcrumbs
diff --git a/packages/nextra-theme-docs/src/components/breadcrumb.tsx b/packages/nextra-theme-docs/src/components/breadcrumb.tsx
@@ -11,7 +11,7 @@ export function Breadcrumb({
   activePath: Item[]
 }): ReactElement {
   return (
-    <div className="nextra-breadcrumb nx-mt-1.5 nx-flex nx-items-center nx-gap-1 nx-overflow-hidden nx-text-sm nx-text-gray-500 contrast-more:nx-text-current">
+    <div className="nextra-breadcrumb nx-mt-1.5 nx-flex nx-items-center nx-gap-1 nx-overflow-hidden nx-text-sm nx-text-gray-500 dark:nx-text-gray-400 contrast-more:nx-text-current">
       {activePath.map((item, index) => {
         const isLink = !item.children || item.withIndexPage
         const isActive = index === activePath.length - 1
@@ -23,11 +23,11 @@ export function Breadcrumb({
               className={cn(
                 'nx-whitespace-nowrap nx-transition-colors',
                 isActive
-                  ? 'nx-font-medium nx-text-gray-700 contrast-more:nx-font-bold contrast-more:nx-text-current dark:nx-text-gray-400 contrast-more:dark:nx-text-current'
+                  ? 'nx-font-medium nx-text-gray-700 contrast-more:nx-font-bold contrast-more:nx-text-current dark:nx-text-gray-100 contrast-more:dark:nx-text-current'
                   : [
                       'nx-min-w-[24px] nx-overflow-hidden nx-text-ellipsis',
                       isLink &&
-                        'hover:nx-text-gray-900 dark:hover:nx-text-gray-200'
+                        'hover:nx-text-gray-900 dark:hover:nx-text-gray-100'
                     ]
               )}
               title={item.title}

diff --git a/packages/nextra-theme-docs/src/components/sidebar.tsx b/packages/nextra-theme-docs/src/components/sidebar.tsx
@@ -46,7 +46,7 @@ const classes = {
   ),
   inactive: cn(
     'nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900',
-    'dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50',
+    'dark:nx-text-neutral-400 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50',
     'contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50',
     'contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50'
   ),

diff --git a/packages/nextra-theme-docs/src/components/toc.tsx b/packages/nextra-theme-docs/src/components/toc.tsx
@@ -13,6 +13,11 @@ export type TOCProps = {
   filePath: string
 }
 
+const linkClassName = cn(
+  'nx-text-xs nx-font-medium nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-100',
+  'contrast-more:nx-text-gray-800 contrast-more:dark:nx-text-gray-50'
+)
+
 export function TOC({ headings, filePath }: TOCProps): ReactElement {
   const activeAnchor = useActiveAnchor()
   const config = useConfig()
@@ -51,11 +56,6 @@ export function TOC({ headings, filePath }: TOCProps): ReactElement {
     }
   }, [activeSlug])
 
-  const linkClassName = cn(
-    'nx-text-xs nx-font-medium nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-100',
-    'contrast-more:nx-text-gray-800 contrast-more:dark:nx-text-gray-50'
-  )
-
   return (
     <div
       ref={tocRef}