From 29fe28a66a1251d6a6eb0b5604ed5f4c8804f494 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Wed, 8 Mar 2023 22:06:34 +0800
Subject: [PATCH] dark

---
 components/DarkModeButton.js             |  2 +-
 public/css/theme-simple.css              |  4 ++++
 themes/simple/LayoutBase.js              |  5 +++--
 themes/simple/components/BlogItem.js     | 13 +++++++------
 themes/simple/components/BlogListPage.js | 10 ++++------
 themes/simple/components/DropMenu.js     |  4 ++--
 themes/simple/components/Footer.js       |  6 +++---
 themes/simple/components/SideBar.js      |  2 +-
 themes/simple/config_simple.js           |  2 ++
 9 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index 2b8cd5b8620..869a36b3417 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -13,7 +13,7 @@ const DarkModeButton = (props) => {
     htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
-  return <div className={'z-10 duration-200 text-xl py-2 ' + props.className}>
+  return <div className={'text-white z-10 duration-200 text-xl py-2 ' + props.className}>
     <i id='darkModeButton' className={`hover:scale-125 cursor-pointer transform duration-200 fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`}
        onClick={handleChangeDarkMode} />
   </div>
diff --git a/public/css/theme-simple.css b/public/css/theme-simple.css
index 80f093dd828..43c514c1b83 100644
--- a/public/css/theme-simple.css
+++ b/public/css/theme-simple.css
@@ -6,6 +6,10 @@
   color: #276077;
 }
 
+.dark #theme-simple #blog-item-title {
+  color: #d1d5db;
+}
+
 .notion {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
diff --git a/themes/simple/LayoutBase.js b/themes/simple/LayoutBase.js
index cbb11c3767b..c437fc1a8c2 100644
--- a/themes/simple/LayoutBase.js
+++ b/themes/simple/LayoutBase.js
@@ -48,11 +48,12 @@ const LayoutBase = props => {
 
             </div>
 
-            <Footer {...props} />
-
             <div className='fixed right-4 bottom-4 z-10'>
                 <JumpToTopButton />
             </div>
+
+            <Footer {...props} />
+
         </div>
   )
 }
diff --git a/themes/simple/components/BlogItem.js b/themes/simple/components/BlogItem.js
index 55d84089c83..3029a7b674c 100644
--- a/themes/simple/components/BlogItem.js
+++ b/themes/simple/components/BlogItem.js
@@ -1,11 +1,12 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import CONFIG_SIMPLE from '../config_simple'
 
 export const BlogItem = props => {
   const { post } = props
   console.log(post)
 
-  return <div key={post.id} className="mb-10 pb-12 border-b" >
+  return <div key={post.id} className="mb-10 pb-12 border-b dark:border-gray-800" >
         <h2 className="mb-5 ">
             <Link
                 id='blog-item-title'
@@ -15,20 +16,20 @@ export const BlogItem = props => {
             </Link>
         </h2>
 
-        <div className="mb-4 text-sm text-gray-700">
-            <span> <i className="fa-regular fa-user"></i> <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a></span>
+        <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
+            <span> <i className="fa-regular fa-user"></i> <a href={CONFIG_SIMPLE.AUTHOR_LINK}>{BLOG.AUTHOR}</a></span>
             <span> - <i className="fa-regular fa-clock"></i> {post.date?.start_date || post.createdTime}</span>
-            {post.category && <span> - <i className="fa-regular fa-folder"></i> <a href="#" className="text-gray-700 hover:text-red-400 transition-all duration-200">{post.category}</a></span>}
+            {post.category && <span> - <i className="fa-regular fa-folder"></i> <a href="#" className="hover:text-red-400 transition-all duration-200">{post.category}</a></span>}
             {post.tags && post.tags?.length > 0 && post.tags.map(t => <span key={t}> / <Link href={`tag/${t}`}><span className=' hover:text-red-400 transition-all duration-200'>{t}</span></Link></span>)}
         </div>
 
-        <div className="text-gray-700 leading-normal mb-6">
+        <div className="text-gray-700 dark:text-gray-300 leading-normal mb-6">
             {post.summary}
             {post.summary && <span>...</span>}
         </div>
 
         <div className='block'>
-            <Link href={post.slug} className='inline-block rounded-sm text-blue-400 text-xs border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
+            <Link href={post.slug} className='inline-block rounded-sm text-blue-400 text-xs dark:border-gray-800 border hover:text-red-400 transition-all duration-200 hover:border-red-300 h-9 leading-8 px-5'>
                 Continue Reading <i className="fa-solid fa-angle-right align-middle"></i>
             </Link>
         </div>
diff --git a/themes/simple/components/BlogListPage.js b/themes/simple/components/BlogListPage.js
index b86cc83faef..f260da043c5 100644
--- a/themes/simple/components/BlogListPage.js
+++ b/themes/simple/components/BlogListPage.js
@@ -1,13 +1,11 @@
 
 import BLOG from '@/blog.config'
-import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { BlogItem } from './BlogItem'
 
 export const BlogListPage = props => {
   const { page = 1, posts, postCount } = props
-  const { locale } = useGlobal()
   const router = useRouter()
   const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
   const currentPage = +page
@@ -28,13 +26,13 @@ export const BlogListPage = props => {
             <div className="flex justify-between text-xs">
                 <Link
                     href={{ pathname: currentPage - 1 === 1 ? `${pagePrefix}/` : `${pagePrefix}/page/${currentPage - 1}`, query: router.query.s ? { s: router.query.s } : {} }}
-                    className={`${showPrev ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
-                    {locale.PAGINATION.PREV}
+                    className={`${showPrev ? 'text-blue-400 border-b border-blue-400 ' : 'bg-gray pointer-events-none '} text-white no-underline pb-1 px-3`}>
+                    NEWER POSTS <i className="fa-solid fa-arrow-left"></i>
                 </Link>
                 <Link
                     href={{ pathname: `${pagePrefix}/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} }}
-                    className={`${showNext ? 'bg-black ' : 'bg-gray pointer-events-none '} text-white no-underline py-2 px-3 rounded`}>
-                    {locale.PAGINATION.NEXT}
+                    className={`${showNext ? 'text-blue-400 border-b border-blue-400 ' : 'bg-gray pointer-events-none '} text-white no-underline pb-1 px-3`}>
+                    OLDER POSTS <i className="fa-solid fa-arrow-right"></i>
                 </Link>
             </div>
         </div>
diff --git a/themes/simple/components/DropMenu.js b/themes/simple/components/DropMenu.js
index 2058a032f5d..73bbc245466 100644
--- a/themes/simple/components/DropMenu.js
+++ b/themes/simple/components/DropMenu.js
@@ -17,9 +17,9 @@ export const DropMenu = ({ link }) => {
         </Link>
 
         {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} transition-all duration-300 z-20 top-12 absolute block border border-gray-100 bg-white drop-shadow-lg `}>
+        {hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block border drop-shadow-lg `}>
             {link.subMenus.map(sLink => {
-              return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 tracking-widest transition-all duration-200 border-b py-3 pr-6 pl-2'>
+              return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800  py-3 pr-6 pl-2'>
                 <Link href={sLink.to}>
                 <span className='text-xs'>{sLink.title}</span>
                 </Link>
diff --git a/themes/simple/components/Footer.js b/themes/simple/components/Footer.js
index 09af18fe47e..f92a43e5d5a 100644
--- a/themes/simple/components/Footer.js
+++ b/themes/simple/components/Footer.js
@@ -11,16 +11,16 @@ export const Footer = (props) => {
     return currentYear
   })()
 
-  return <footer className="z-10 relative w-full bg-white px-6 border-t dark:border-hexo-black-gray dark:bg-hexo-black-gray ">
+  return <footer className="z-10 relative w-full bg-black px-6 border-t">
         <DarkModeButton className='text-center pt-4'/>
 
-        <div className="container mx-auto max-w-4xl py-6 md:flex flex-wrap md:flex-no-wrap md:justify-between items-center text-sm">
+        <div className="text-yellow-300 container mx-auto max-w-4xl py-6 md:flex flex-wrap md:flex-no-wrap md:justify-between items-center text-sm">
             <div className='text-center'> &copy;{`${copyrightDate}`} {BLOG.AUTHOR}. All rights reserved.</div>
             <div className="md:p-0 text-center md:text-right text-xs">
                 {/* 右侧链接 */}
                 {/* <a href="#" className="text-black no-underline hover:underline">Privacy Policy</a> */}
                 {BLOG.BEI_AN && (<a href="https://beian.miit.gov.cn/" className="text-black dark:text-gray-200 no-underline hover:underline ml-4">{BLOG.BEI_AN} </a>)}
-                <span className='dark:text-gray-200 no-underline ml-4'>
+                <span className='no-underline ml-4'>
                     Powered by
                     <a href="https://github.com/tangly1024/NotionNext" className=' hover:underline'> NotionNext {BLOG.VERSION}  </a>
                 </span>
diff --git a/themes/simple/components/SideBar.js b/themes/simple/components/SideBar.js
index ae89a1c57ad..946f0f0160a 100644
--- a/themes/simple/components/SideBar.js
+++ b/themes/simple/components/SideBar.js
@@ -4,7 +4,7 @@ import Announcement from './Announcement'
 export const SideBar = (props) => {
   const { notice } = props
   return (
-      <div className="w-full max-w-lg sticky top-8 border-l pl-12 border-gray-100">
+      <div className="w-full max-w-lg sticky top-8 border-l dark:border-gray-800 pl-12 border-gray-100">
 
             <aside>
                 <Announcement post={notice}/>
diff --git a/themes/simple/config_simple.js b/themes/simple/config_simple.js
index 0eeb23fed3f..ac45e9f1f2d 100644
--- a/themes/simple/config_simple.js
+++ b/themes/simple/config_simple.js
@@ -4,6 +4,8 @@ const CONFIG_SIMPLE = {
   TOP_BAR: true, // 显示顶栏
   TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '',
 
+  AUTHOR_LINK: process.env.NEXT_PUBLIC_AUTHOR_LINK || '#',
+
   // 菜单配置
   MENU_CATEGORY: true, // 显示分类
   MENU_TAG: true, // 显示标签