diff --git a/themes/hexo/components/BlogPostListPage.js b/themes/hexo/components/BlogPostListPage.js
index 038bb322..4964f024 100644
--- a/themes/hexo/components/BlogPostListPage.js
+++ b/themes/hexo/components/BlogPostListPage.js
@@ -13,7 +13,7 @@ import BlogPostListEmpty from './BlogPostListEmpty'
  */
 const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
-  const showPagination = posts.length === BLOG.POSTS_PER_PAGE
+  const showPagination = postCount >= BLOG.POSTS_PER_PAGE
 
   if (!posts || posts.length === 0) {
     return <BlogPostListEmpty />
@@ -26,7 +26,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
             <BlogPostCard key={post.id} post={post} />
           ))}
         </div>
-       {showPagination && <PaginationNumber page={page} totalPage={totalPage} /> }
+        {showPagination && <PaginationNumber page={page} totalPage={totalPage} />}
       </div>
     )
   }
diff --git a/themes/next/components/ArticleDetail.js b/themes/next/components/ArticleDetail.js
index ba49b0a6..094b6b22 100644
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -25,7 +25,7 @@ export default function ArticleDetail(props) {
 
   return (<div id="container" className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
     <div itemScope itemType="https://schema.org/Movie"
-      className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-gray-800"
+      className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
     >
 
       {showArticleInfo && <header className='animate__slideInDown animate__animated'>
diff --git a/themes/next/components/Toc.js b/themes/next/components/Toc.js
index ce83e41b..adc4f7f6 100644
--- a/themes/next/components/Toc.js
+++ b/themes/next/components/Toc.js
@@ -60,10 +60,10 @@ const Toc = ({ toc }) => {
 
   return <div className='px-3'>
     <div className='w-full pb-1'>
-      <Progress/>
+      <Progress />
     </div>
     <div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>
-      <nav className='h-full font-sans text-black'>
+      <nav className='h-full font-sans text-black dark:text-gray-300'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)
           tocIds.push(id)
@@ -74,9 +74,9 @@ const Toc = ({ toc }) => {
               className={`notion-table-of-contents-item duration-300 transform font-light
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
-                <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }} className={`${activeSection === id && ' font-bold text-red-400 underline'}`}>
-                  {tocItem.text}
-                </span>
+              <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }} className={`${activeSection === id && ' font-bold text-red-400 underline'}`}>
+                {tocItem.text}
+              </span>
             </a>
           )
         })}