diff --git a/themes/next/LayoutArchive.js b/themes/next/LayoutArchive.js
index ce66e25f..3db36dbd 100644
--- a/themes/next/LayoutArchive.js
+++ b/themes/next/LayoutArchive.js
@@ -39,7 +39,7 @@ export const LayoutArchive = (props) => {
 
   return (
     <LayoutBase {...props}>
-      <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full">
+      <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-hexo-black-gray shadow-md min-h-full">
         {Object.keys(archivePosts).map(archiveTitle => (
           <BlogPostArchive
             key={archiveTitle}
diff --git a/themes/next/LayoutCategoryIndex.js b/themes/next/LayoutCategoryIndex.js
index 6f674a68..c20ba566 100644
--- a/themes/next/LayoutCategoryIndex.js
+++ b/themes/next/LayoutCategoryIndex.js
@@ -6,7 +6,7 @@ export const LayoutCategoryIndex = (props) => {
   const { allPosts, categories } = props
   const { locale } = useGlobal()
   return <LayoutBase totalPosts={allPosts} {...props}>
-    <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow h-full'>
+    <div className='bg-white dark:bg-hexo-black-gray px-10 py-10 shadow h-full'>
       <div className='dark:text-gray-200 mb-5'>
         <i className='mr-4 fas faTh' />{locale.COMMON.CATEGORY}:
       </div>
diff --git a/themes/next/LayoutTagIndex.js b/themes/next/LayoutTagIndex.js
index d7fae64e..45100a9e 100644
--- a/themes/next/LayoutTagIndex.js
+++ b/themes/next/LayoutTagIndex.js
@@ -6,7 +6,7 @@ export const LayoutTagIndex = (props) => {
   const { tags } = props
   const { locale } = useGlobal()
   return <LayoutBase {...props}>
-    <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow h-full'>
+    <div className='bg-white dark:bg-hexo-black-gray px-10 py-10 shadow h-full'>
       <div className='dark:text-gray-200 mb-5'><i className='fas fa-tags mr-4'/>{locale.COMMON.TAGS}:</div>
       <div id='tags-list' className='duration-200 flex flex-wrap'>
         { tags.map(tag => {