Accessibility issues for text and navbar in light mode (#1858)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Khang <brew4k@gmail.com>
Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru>
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

.changeset/little-mirrors-push.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-blog': patch
+---
+
+accessibility issues for text and navbar in light mode

packages/nextra-theme-blog/src/nav.tsx

@@ -1,29 +1,36 @@
 import type { ReactElement } from 'react'
 import Link from 'next/link'
 import ThemeSwitch from './theme-switch'
+import { useTheme } from 'next-themes'
 import { useBlogContext } from './blog-context'
 import { collectPostsAndNavs } from './utils/collect'
 
 export default function Nav(): ReactElement {
   const { opts, config } = useBlogContext()
   const { navPages } = collectPostsAndNavs({ opts, config })
+  const { resolvedTheme } = useTheme()
   return (
     <div className="nx-mb-8 nx-flex nx-items-center nx-gap-3">
       <div className="nx-flex nx-grow nx-flex-wrap nx-items-center nx-justify-end nx-gap-3">
         {navPages.map(page => {
+          const name = page.frontMatter?.title || page.name
           if (page.active) {
             return (
               <span
                 key={page.route}
-                className="nx-cursor-default nx-text-gray-400"
+                className={`nx-cursor-default ${
+                  resolvedTheme === 'dark'
+                    ? 'nx-text-gray-400'
+                    : 'nx-text-gray-600'
+                }`}
               >
-                {page.frontMatter?.title || page.name}
+                {name}
               </span>
             )
           }
           return (
             <Link key={page.route} href={page.route} passHref legacyBehavior>
-              <a>{page.frontMatter?.title || page.name}</a>
+              <a>{name}</a>
             </Link>
           )
         })}

packages/nextra-theme-blog/src/posts-layout.tsx

@@ -7,6 +7,7 @@ import { MDXTheme } from './mdx-theme'
 import Nav from './nav'
 import { collectPostsAndNavs } from './utils/collect'
 import getTags from './utils/get-tags'
+import { useTheme } from 'next-themes'
 
 export const PostsLayout = ({
   children
@@ -18,6 +19,9 @@ export const PostsLayout = ({
   const router = useRouter()
   const { type } = opts.frontMatter
   const tagName = type === 'tag' ? router.query.tag : null
+  const { resolvedTheme } = useTheme()
+  const textColor =
+    resolvedTheme === 'dark' ? 'nx-text-gray-400' : 'nx-text-gray-600'
   const postList = posts.map(post => {
     if (tagName) {
       const tags = getTags(post)
@@ -42,7 +46,7 @@ export const PostsLayout = ({
           </Link>
         </h3>
         {description && (
-          <p className="nx-mb-2 nx-text-gray-400">
+          <p className={'nx-mb-2 ' + textColor}>
             {description}
             {config.readMore && (
               <Link href={post.route} passHref legacyBehavior>
@@ -53,7 +57,7 @@ export const PostsLayout = ({
         )}
         {date && (
           <time
-            className="nx-text-sm nx-text-gray-300"
+            className={'nx-text-sm  ' + textColor}
             dateTime={date.toISOString()}
           >
             {date.toDateString()}