diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index eacb847d..a240ce1b 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -13,7 +13,7 @@ export function ThemeSwitch() {
             <div id="draggableBox" style={{ left: '10px', top: '90vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
                 <div className="p-2 flex items-center">
                     <i className="fas fa-palette mr-1 cursor-move" />
-                    <div >{theme} <i className='fas fa-sync text-xs cursor-pointer' onClick={switchTheme} /></div>
+                    <div className='uppercase font-sans' >{theme} <i className='fas fa-sync cursor-pointer border-l pl-2' title='click to change theme' alt='click to change theme' onClick={switchTheme} /></div>
                 </div>
             </div>
         </Draggable>
diff --git a/themes/example/components/ArticleLock.js b/themes/example/components/ArticleLock.js
index 1f4ade0e..a9f5f59d 100644
--- a/themes/example/components/ArticleLock.js
+++ b/themes/example/components/ArticleLock.js
@@ -28,9 +28,9 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lgfont-light leading-10 text-black bg-white dark:bg-gray-500'></input>
+        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
-          <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
+          <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
       </div>
       <div id='tips'>
diff --git a/themes/example/components/Nav.js b/themes/example/components/Nav.js
index c49e2ae1..26610035 100644
--- a/themes/example/components/Nav.js
+++ b/themes/example/components/Nav.js
@@ -24,7 +24,7 @@ export const Nav = (props) => {
         <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
             <div className="w-full md:w-2/3 text-center md:text-left py-4 flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
                 {links.map(link => {
-                  return link && <Link href={link.to}>
+                  return link && <Link href={link.to} key={link.to}>
                         <a className="px-2 md:pl-0 md:mr-3 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
                             {link.name}
                         </a>
diff --git a/themes/fukasawa/components/ArticleAround.js b/themes/fukasawa/components/ArticleAround.js
index 19b5990a..4fb99f1f 100644
--- a/themes/fukasawa/components/ArticleAround.js
+++ b/themes/fukasawa/components/ArticleAround.js
@@ -11,12 +11,12 @@ export default function ArticleAround ({ prev, next }) {
   }
   return <section className='text-gray-800 h-28 flex items-center justify-between space-x-5 my-4'>
     <Link href={`/article/${prev.slug}`} passHref>
-      <a className='text-sm cursor-pointer justify-center items-center flex w-full h-full bg-white bg-opacity-40 hover:bg-gray-500 hover:text-white duration-300'>
+      <a className='text-sm cursor-pointer justify-center items-center flex w-full h-full bg-white bg-opacity-40 hover:bg-hexo-black-gray dark:bg-hexo-black-gray dark:text-gray-200 hover:text-white duration-300'>
         <i className='mr-1 fas fa-angle-double-left' />{prev.title}
       </a>
     </Link>
     <Link href={`/article/${next.slug}`} passHref>
-      <a className='text-sm  cursor-pointer justify-center items-center flex w-full h-full bg-white bg-opacity-40 hover:bg-gray-500 hover:text-white duration-300'>{next.title}
+      <a className='text-sm  cursor-pointer justify-center items-center flex w-full h-full bg-white bg-opacity-40 hover:bg-hexo-black-gray dark:bg-hexo-black-gray dark:text-gray-200 hover:text-white duration-300'>{next.title}
         <i className='ml-1 my-1 fas fa-angle-double-right' />
       </a>
     </Link>
diff --git a/themes/fukasawa/components/ArticleDetail.js b/themes/fukasawa/components/ArticleDetail.js
index 77271f5f..2fad01ce 100644
--- a/themes/fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -25,7 +25,7 @@ export default function ArticleDetail(props) {
       </div>
     )}
     <article itemScope itemType="https://schema.org/Movie"
-      className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-32  dark:border-gray-700 bg-white dark:bg-gray-800"
+      className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-32  dark:border-gray-700 bg-white dark:bg-hexo-black-gray"
     >
 
       <header className='animate__slideInDown animate__animated'>
@@ -92,7 +92,7 @@ export default function ArticleDetail(props) {
     <ArticleAround prev={prev} next={next} />
 
     {/* 评论互动 */}
-    <div className="duration-200 shadow px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-800">
+    <div className="duration-200 shadow px-12 w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-hexo-black-gray">
       <Comment frontMatter={post} />
     </div>
   </div>)
diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js
index 1f59b8a9..d020ee1e 100644
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -11,7 +11,7 @@ import DarkModeButton from '@/components/DarkModeButton'
 function AsideLeft (props) {
   const { tags, currentTag, categories, currentCategory, post, slot, siteInfo } = props
   const router = useRouter()
-  return <div className='w-72 bg-white dark:bg-gray-800 min-h-screen px-10 py-14 hidden lg:block'>
+  return <div className='w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block'>
     <Logo {...props}/>
 
     <section className='flex flex-col text-gray-600'>
@@ -44,15 +44,17 @@ function AsideLeft (props) {
       <SiteInfo/>
     </section>
 
+    <section className='flex justify-center dark:text-gray-200'>
+        <DarkModeButton/>
+    </section>
+
     <section className='sticky top-0 pt-12'>
       <Catalog toc={post?.toc}/>
       <div className='flex justify-center'>
         <div>{slot}</div>
       </div>
     </section>
-    <section className='flex justify-center dark:text-gray-200'>
-        <DarkModeButton/>
-    </section>
+
   </div>
 }
 
diff --git a/themes/fukasawa/components/Card.js b/themes/fukasawa/components/Card.js
index 890aadf9..5bc925e7 100644
--- a/themes/fukasawa/components/Card.js
+++ b/themes/fukasawa/components/Card.js
@@ -1,7 +1,7 @@
 const Card = ({ children, headerSlot, className }) => {
   return <div className={className}>
     <>{headerSlot}</>
-    <section className="shadow mb-4 p-2 bg-white dark:bg-gray-800 hover:shadow-lg duration-200">
+    <section className="shadow mb-4 p-2 bg-white dark:bg-hexo-black-gray hover:shadow-lg duration-200">
         {children}
     </section>
   </div>