dark

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>

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;

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>
   )
 }

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>

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>

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>

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>

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}/>

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, // 显示标签