diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js
index 29ea9e32..427b3676 100644
--- a/themes/medium/LayoutBase.js
+++ b/themes/medium/LayoutBase.js
@@ -24,7 +24,7 @@ const LayoutBase = props => {
   const router = useRouter()
 
   return (
-    <div className='bg-white dark:bg-black w-full h-full min-h-screen justify-center dark:text-gray-300'>
+    <div className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
       <CommonHead meta={meta} />
       <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
         {/* 桌面端左侧菜单 */}
diff --git a/themes/medium/components/ArticleAround.js b/themes/medium/components/ArticleAround.js
index 0c4363cc..cdedb1b9 100644
--- a/themes/medium/components/ArticleAround.js
+++ b/themes/medium/components/ArticleAround.js
@@ -9,14 +9,14 @@ export default function ArticleAround ({ prev, next }) {
   if (!prev || !next) {
     return <></>
   }
-  return <section className='text-gray-800 h-12 flex items-center justify-between space-x-5 my-4'>
+  return <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
     <Link href={`/${prev.slug}`} passHref>
       <a className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
         <i className='mr-1 fas fa-angle-double-left' />{prev.title}
       </a>
     </Link>
     <Link href={`/${next.slug}`} passHref>
-      <a className='text-sm  cursor-pointer justify-end items-center flex hover:underline duration-300'>{next.title}
+      <a className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>{next.title}
         <i className='ml-1 my-1 fas fa-angle-double-right' />
       </a>
     </Link>
diff --git a/themes/medium/components/ArticleDetail.js b/themes/medium/components/ArticleDetail.js
index ea129207..1fffc2a0 100644
--- a/themes/medium/components/ArticleDetail.js
+++ b/themes/medium/components/ArticleDetail.js
@@ -21,7 +21,7 @@ export const ArticleDetail = props => {
   return <div id='container'>
 
         {/* title */}
-        <h1 className="text-3xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
+        <h1 className="text-3xl pt-12 font-sans dark:text-gray-300">{post?.title}</h1>
 
         {/* meta */}
         <section className="py-2 items-center text-sm font-sans px-1">
@@ -61,6 +61,7 @@ export const ArticleDetail = props => {
                 data-ad-slot="3806269138"
             />
         </section>
+
         <section>
             <div className='flex justify-between'>
                 {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
diff --git a/themes/medium/components/BlogPostCard.js b/themes/medium/components/BlogPostCard.js
index 7cbadf83..179ecdcd 100644
--- a/themes/medium/components/BlogPostCard.js
+++ b/themes/medium/components/BlogPostCard.js
@@ -19,7 +19,7 @@ const BlogPostCard = ({ post, showSummary }) => {
         <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref>
           <a
             className={
-              'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'
+              'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400'
             }
           >
             {post.title}