accessibility issues in light mode (#1903)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru>
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Co-authored-by: Khang <brew4k@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Tristan <tristandubbeld@users.noreply.github.com>
Co-authored-by: Brian Muenzenmeyer <Brian.Muenzenmeyer@target.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: AkaraChen <85140972+AkaraChen@users.noreply.github.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/meta.tsx

@@ -44,7 +44,7 @@ export default function Meta(): ReactElement {
         (readingTime ? 'nx-items-start' : 'nx-items-center')
       }
     >
-      <div className="nx-grow nx-text-gray-400">
+      <div className="nx-grow dark:nx-text-gray-400 nx-text-gray-600">
         <div className="nx-not-prose nx-flex nx-flex-wrap nx-items-center nx-gap-1">
           {author}
           {author && date && ','}

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

@@ -1,4 +1,3 @@
-import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import type { ReactElement } from 'react'
 import { useBlogContext } from './blog-context'
@@ -8,7 +7,7 @@ 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">
@@ -18,11 +17,7 @@ export default function Nav(): ReactElement {
             return (
               <span
                 key={page.route}
-                className={`nx-cursor-default ${
-                  resolvedTheme === 'dark'
-                    ? 'nx-text-gray-400'
-                    : 'nx-text-gray-600'
-                }`}
+                className="nx-cursor-default dark:nx-text-gray-400 nx-text-gray-600"
               >
                 {name}
               </span>

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

@@ -1,4 +1,3 @@
-import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import type { ReactElement, ReactNode } from 'react'
@@ -19,9 +18,7 @@ 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)
@@ -46,7 +43,7 @@ export const PostsLayout = ({
           </Link>
         </h3>
         {description && (
-          <p className={'nx-mb-2 ' + textColor}>
+          <p className="nx-mb-2 dark:nx-text-gray-400 nx-text-gray-600">
             {description}
             {config.readMore && (
               <Link href={post.route} passHref legacyBehavior>
@@ -57,7 +54,7 @@ export const PostsLayout = ({
         )}
         {date && (
           <time
-            className={'nx-text-sm  ' + textColor}
+            className="nx-text-sm dark:nx-text-gray-400 nx-text-gray-600"
             dateTime={date.toISOString()}
           >
             {date.toDateString()}