minor tweaks and changeset

shuding · May 22, 2023 · fa82216 · fa82216
1 parent 58f5ca5
commit fa82216
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/.changeset/little-mirrors-push.md b/.changeset/little-mirrors-push.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-blog': patch
+---
+
+accessibility issues for text and navbar in light mode
diff --git a/packages/nextra-theme-blog/src/nav.tsx b/packages/nextra-theme-blog/src/nav.tsx
@@ -8,25 +8,29 @@ import { collectPostsAndNavs } from './utils/collect'
 export default function Nav(): ReactElement {
   const { opts, config } = useBlogContext()
   const { navPages } = collectPostsAndNavs({ opts, config })
-  const { setTheme, resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const textColor = isDark ? 'nx-text-gray-400' : 'nx-text-gray-600'
+  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 ' + textColor}>
-                {page.frontMatter?.title || page.name}
+                className={`nx-cursor-default ${
+                  resolvedTheme === 'dark'
+                    ? 'nx-text-gray-400'
+                    : 'nx-text-gray-600'
+                }`}
+              >
+                {name}
               </span>
             )
           }
           return (
             <Link key={page.route} href={page.route} passHref legacyBehavior>
-              <a>{page.frontMatter?.title || page.name}</a>
+              <a>{name}</a>
             </Link>
           )
         })}

diff --git a/packages/nextra-theme-blog/src/posts-layout.tsx b/packages/nextra-theme-blog/src/posts-layout.tsx
@@ -19,9 +19,9 @@ export const PostsLayout = ({
   const router = useRouter()
   const { type } = opts.frontMatter
   const tagName = type === 'tag' ? router.query.tag : null
-  const { setTheme, resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const textColor = isDark ? 'nx-text-gray-400' : 'nx-text-gray-600'
+  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)