From 1d8188633b99a7efe4693f10fef6fbef8533058d Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Sun, 16 Jul 2023 00:04:03 +0800
Subject: [PATCH] dark-mode

---
 themes/heo/components/BlogPostCard.js     |  9 ++++-----
 themes/heo/components/Card.js             |  2 +-
 themes/heo/components/CategoryBar.js      |  6 +++---
 themes/heo/components/CategoryGroup.js    |  6 +++---
 themes/heo/components/Footer.js           |  7 ++++---
 themes/heo/components/Hero.js             | 14 +++++++-------
 themes/heo/components/InfoCard.js         |  2 +-
 themes/heo/components/MenuItemDrop.js     |  2 +-
 themes/heo/components/NavBar.js           |  2 +-
 themes/heo/components/NoticeBar.js        |  2 +-
 themes/heo/components/PaginationNumber.js | 16 ++++++++--------
 themes/heo/components/TagGroups.js        |  2 +-
 themes/heo/components/TagItemMini.js      |  2 +-
 themes/heo/index.js                       | 13 ++++++++++---
 14 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/themes/heo/components/BlogPostCard.js b/themes/heo/components/BlogPostCard.js
index dc4e80d9..d853497a 100644
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -12,7 +12,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
   const showPageCover = CONFIG.POST_LIST_COVER && post?.pageCoverThumbnail && !showPreview
   return (
         <div className={` ${CONFIG.POST_LIST_COVER_HOVER_ENLARGE ? ' hover:scale-110 transition-all duration-150' : ''}`} >
-            <div className={'cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full hover:border-indigo-600 duration-300 transition-colors border justify-between overflow-hidden  rounded-xl bg-white '}>
+            <div className={'bg-white dark:bg-[#1e1e1e] cursor-pointer flex mb-4 flex-col h-[23rem] md:h-52 md:flex-row 2xl:h-96 2xl:flex-col group w-full  dark:border-gray-600 hover:border-indigo-600  dark:hover:border-yellow-600 duration-300 transition-colors justify-between overflow-hidden rounded-xl  '}>
 
                 {/* 图片封面 */}
                 {showPageCover && (
@@ -24,12 +24,12 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 )}
 
                 {/* 文字区块 */}
-                <div className={'flex p-6 2xl:p-4 flex-col justify-between h-40 md:h-full 2xl:h-40 w-full md:w-7/12 2xl:w-full'}>
+                <div className={'flex p-6 2xl:p-4 flex-col justify-between h-48 md:h-full 2xl:h-48 w-full md:w-7/12 2xl:w-full'}>
                     <div>
                         {/* 分类 */}
                         {post?.category && <div className={`flex mb-1 items-center ${showPreview ? 'justify-center' : 'justify-start'} hidden md:block flex-wrap dark:text-gray-500 text-gray-600 `}>
                             <Link passHref href={`/category/${post.category}`}
-                                className="cursor-pointer text-xs font-normal menu-link hover:text-indigo-700 dark:hover:text-indigo-400 transform">
+                                className="cursor-pointer text-xs font-normal menu-link hover:text-indigo-700  dark:text-gray-600 transform">
                                 {post.category}
                             </Link>
                         </div>}
@@ -38,8 +38,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                         <Link
                             href={`${BLOG.SUB_PATH}/${post.slug}`}
                             passHref
-                            className={' group-hover:text-indigo-700 group-hover:dark:text-indigo-400 text-black dark:text-gray-100 line-clamp-2 replace cursor-pointer text-2xl font-extrabold leading-tight'}>
-
+                            className={' group-hover:text-indigo-700 group-hover:dark:text-indigo-400 text-black dark:text-gray-100 dark:group-hover:text-yellow-600 line-clamp-2 replace cursor-pointer text-xl font-extrabold leading-tight'}>
                             <span className='menu-link '>{post.title}</span>
                         </Link>
                     </div>
diff --git a/themes/heo/components/Card.js b/themes/heo/components/Card.js
index 2107391b..326de29e 100644
--- a/themes/heo/components/Card.js
+++ b/themes/heo/components/Card.js
@@ -1,5 +1,5 @@
 const Card = ({ children, headerSlot, className }) => {
-  return <div className={`${className || ''} card border rounded-xl lg:p-6 p-4`}>
+  return <div className={`${className || ''} card border dark:border-gray-600 rounded-xl lg:p-6 p-4`}>
     <>{headerSlot}</>
     <section>
         {children}
diff --git a/themes/heo/components/CategoryBar.js b/themes/heo/components/CategoryBar.js
index 298c9128..73c31d9c 100644
--- a/themes/heo/components/CategoryBar.js
+++ b/themes/heo/components/CategoryBar.js
@@ -11,7 +11,7 @@ export default function CategoryBar(props) {
   const { categoryOptions } = props
   const { locale } = useGlobal()
 
-  return <div id='category-bar' className="flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white lg:border
+  return <div id='category-bar' className="flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e] lg:border dark:lg:border-gray-800
          py-2 lg:px-2 rounded-xl lg:hover:border hover:border-indigo-600 transition-colors duration-200">
 
         <div id='category-bar-items' className='rounded-lg scroll-hidden flex justify-start flex-nowrap items-center overflow-x-scroll'>
@@ -20,7 +20,7 @@ export default function CategoryBar(props) {
         </div>
 
         <div id='category-bar-next' className='flex'>
-            <Link href='/category' className='whitespace-nowrap font-bold text-gray-900 transition-colors duration-200 hover:text-indigo-600'>
+            <Link href='/category' className='whitespace-nowrap font-bold text-gray-900 dark:text-white transition-colors duration-200 hover:text-indigo-600'>
                 {locale.COMMON.MORE}
             </Link>
         </div>
@@ -35,7 +35,7 @@ export default function CategoryBar(props) {
 const MenuItem = ({ href, name }) => {
   const router = useRouter()
   const selected = router.pathname === href
-  return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 hover:text-white hover:bg-indigo-600 ${selected ? 'text-white bg-indigo-600' : ''}`}>
+  return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
         <Link href={href}>{name}</Link>
     </div>
 }
diff --git a/themes/heo/components/CategoryGroup.js b/themes/heo/components/CategoryGroup.js
index c88df60a..811ad9ff 100644
--- a/themes/heo/components/CategoryGroup.js
+++ b/themes/heo/components/CategoryGroup.js
@@ -6,7 +6,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
     return <></>
   }
   return <>
-    <div id='category-list' className='dark:border-gray-600 flex flex-wrap  mx-4'>
+    <div id='category-list' className='dark:border-gray-700 flex flex-wrap  mx-4'>
       {categories.map(category => {
         const selected = currentCategory === category.name
         return (
@@ -22,10 +22,10 @@ const CategoryGroup = ({ currentCategory, categories }) => {
             <div> <i className={`mr-2 fas ${selected ? 'fa-folder-open' : 'fa-folder'}`} />{category.name}({category.count})</div>
 
           </Link>
-        );
+        )
       })}
     </div>
-  </>;
+  </>
 }
 
 export default CategoryGroup
diff --git a/themes/heo/components/Footer.js b/themes/heo/components/Footer.js
index 531c1ce8..a26c8e2f 100644
--- a/themes/heo/components/Footer.js
+++ b/themes/heo/components/Footer.js
@@ -15,10 +15,11 @@ const Footer = ({ title }) => {
 
   return (
         <footer
-            className='relative z-10 flex-shrink-0 bg-white  justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm'
+            className='relative z-10 flex-shrink-0 bg-white dark:bg-[#1a191d] justify-center text-center m-auto w-full leading-6  text-gray-600 dark:text-gray-100 text-sm'
         >
 
-            <div id='color-transition' className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white '>
+            {/* 颜色过度区 */}
+            <div id='color-transition' className='h-32 bg-gradient-to-b from-[#f7f9fe] to-white  dark:bg-[#1a191d] dark:from-inherit dark:to-inherit'>
 
             </div>
             <div className='w-full h-24'>
@@ -27,7 +28,7 @@ const Footer = ({ title }) => {
 
             <br />
 
-            <div id='footer-bottom' className='w-full h-20 flex justify-between px-6 items-center bg-[#f1f3f7]'>
+            <div id='footer-bottom' className='w-full h-20 flex justify-between px-6 items-center bg-[#f1f3f7] dark:bg-[#30343f]'>
                 <div id='footer-bottom-left'>
                     <i className='fas fa-copyright' /> {`${copyrightDate}`} <i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold  dark:text-gray-300 '>{BLOG.AUTHOR}</a>.
                 </div>
diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
index 654e5a41..b3867df6 100644
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -73,18 +73,18 @@ function Banner(props) {
     router.push(randomPost.slug)
   }
 
-  return <div id='banners' onClick={handleClickBanner} className="group h-full bg-white rounded-xl border mb-3 relative hidden xl:flex xl:flex-col overflow-hidden">
+  return <div id='banners' onClick={handleClickBanner} className="group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative hidden xl:flex xl:flex-col overflow-hidden">
 
         <div id='banner-title' className='flex flex-col absolute top-10 left-10'>
-            <div className='text-4xl font-bold mb-3'>分享编程<br />与思维认知</div>
-            <div className='text-xs text-gray-600'>TANGLY1024.COM</div>
+            <div className='text-4xl font-bold mb-3  dark:text-white'>分享编程<br />与思维认知</div>
+            <div className='text-xs text-gray-600  dark:text-gray-200'>TANGLY1024.COM</div>
         </div>
 
         {/* 斜向滚动的图标 */}
         <TagsGroupBar />
 
         {/* 遮罩 */}
-        <div id='banner-cover' style={{ backdropFilter: 'blur(15px)' }} className={'opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'}>
+        <div id='banner-cover' style={{ backdropFilter: 'blur(15px)' }} className={'opacity-0 group-hover:opacity-100 duration-300 transition-all bg-[#4259efdd] dark:bg-[#dca846] dark:text-white cursor-pointer absolute w-full h-full top-0 flex justify-start items-center'}>
             <div className='ml-12 -translate-x-32 group-hover:translate-x-0 duration-300 transition-all ease-in'>
                 <div className='text-7xl text-white font-extrabold'>随便逛逛</div>
                 <div className='-ml-3 text-gray-300'><ArrowSmallRight className={'w-24 h-24 stroke-2'} /></div>
@@ -212,9 +212,9 @@ function TodayCard({ cRef }) {
   })
 
   /**
-                     * 点击更多
-                     * @param {*} e
-                     */
+     * 点击更多
+     * @param {*} e
+     */
   function handleClickMore(e) {
     e.stopPropagation()
     setIsCoverUp(false)
diff --git a/themes/heo/components/InfoCard.js b/themes/heo/components/InfoCard.js
index 58d2e758..9e2e53cd 100644
--- a/themes/heo/components/InfoCard.js
+++ b/themes/heo/components/InfoCard.js
@@ -14,7 +14,7 @@ import Card from './Card'
 export function InfoCard(props) {
   const { siteInfo, notice } = props
   return (
-        <Card className='bg-[#4f65f0] text-white flex flex-col w-72'>
+        <Card className='bg-[#4f65f0] dark:bg-yellow-600 text-white flex flex-col w-72'>
             <div className='flex justify-between'>
                 <GreetingsWords />
                 <div className='justify-center items-center flex dark:text-gray-100 transform duration-200 cursor-pointer'>
diff --git a/themes/heo/components/MenuItemDrop.js b/themes/heo/components/MenuItemDrop.js
index 51b02b7d..22b82f46 100644
--- a/themes/heo/components/MenuItemDrop.js
+++ b/themes/heo/components/MenuItemDrop.js
@@ -29,7 +29,7 @@ export const MenuItemDrop = ({ link }) => {
         {/* 子菜单 */}
         {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block  `}>
             {link.subMenus.map((sLink, index) => {
-              return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
+              return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-700  py-1 pr-6 pl-3'>
                     <Link href={sLink.to}>
                         <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
                     </Link>
diff --git a/themes/heo/components/NavBar.js b/themes/heo/components/NavBar.js
index 82f2c29b..d35ff716 100644
--- a/themes/heo/components/NavBar.js
+++ b/themes/heo/components/NavBar.js
@@ -58,7 +58,7 @@ const NavBar = props => {
 
   return (<>
         {/* 头条 */}
-        <nav id='nav' className={`${fixedNav ? 'fixed' : 'relative bg-none'} ${textWhite ? 'text-white ' : 'text-black'}  ${navBgWhite ? 'bg-white' : 'bg-none'} z-20 h-16 top-0 w-full`}>
+        <nav id='nav' className={`${fixedNav ? 'fixed' : 'relative bg-none'} ${textWhite ? 'text-white ' : 'text-black dark:text-white'}  ${navBgWhite ? 'bg-white dark:bg-[#18171d]' : 'bg-none'} z-20 h-16 top-0 w-full`}>
             <div className='flex h-full mx-auto justify-between items-center max-w-[86rem] px-8'>
                 <div className='flex'>
                     <Logo {...props} />
diff --git a/themes/heo/components/NoticeBar.js b/themes/heo/components/NoticeBar.js
index 822c292f..b7ec3f3b 100644
--- a/themes/heo/components/NoticeBar.js
+++ b/themes/heo/components/NoticeBar.js
@@ -15,7 +15,7 @@ export function NoticeBar() {
 
   return (
         <notice className="max-w-[86rem] w-full mx-auto flex h-12 mb-4 px-5 font-bold">
-            <div className="group cursor-pointer bg-white hover:border-indigo-600 duration-200 hover:shadow-md transition-all rounded-xl border w-full h-full flex items-center justify-between px-5">
+            <div className="group cursor-pointer bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600 dark:hover:border-yellow-600 border dark:border-gray-700  duration-200 hover:shadow-md transition-all rounded-xl w-full h-full flex items-center justify-between px-5">
                 <span className='whitespace-nowrap'>此刻</span>
                 <div className="w-full h-full hover:text-indigo-600 flex justify-center items-center">
                     <Swipe items={notices} />
diff --git a/themes/heo/components/PaginationNumber.js b/themes/heo/components/PaginationNumber.js
index 3cb5105f..1b96b42a 100644
--- a/themes/heo/components/PaginationNumber.js
+++ b/themes/heo/components/PaginationNumber.js
@@ -36,7 +36,7 @@ const PaginationNumber = ({ page, totalPage }) => {
   }
 
   return (
-        <div className="mt-10 mb-5  flex justify-between items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
+        <div className="mt-10 mb-5 flex justify-between items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
             {/* 上一页 */}
             <Link
                 href={{
@@ -45,7 +45,7 @@ const PaginationNumber = ({ page, totalPage }) => {
                 }}
                 rel="prev"
                 className={`${currentPage === 1 ? 'invisible' : 'block'}`}>
-                <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white border rounded-lg cursor-pointer group">
+                <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
                     <i className="fas fa-angle-left mr-2 transition-all duration-200 transform group-hover:-translate-x-4" />
                     <div className="absolute translate-x-4 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0">
                         {locale.PAGINATION.PREV}
@@ -59,9 +59,9 @@ const PaginationNumber = ({ page, totalPage }) => {
                 {pages}
 
                 {/* 跳转页码 */}
-                <div className='bg-white hover:bg-gray-100 h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
+                <div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border flex justify-center items-center rounded-lg group hover:border-indigo-600 transition-all duration-200'>
                     <input value={value} className='w-0 group-hover:w-20 group-hover:px-3 transition-all duration-200 bg-gray-100 border-none outline-none h-full rounded-lg' onInput={handleInputChange}></input>
-                    <div onClick={jumpToPage} className='cursor-pointer hover:bg-indigo-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white'>
+                    <div onClick={jumpToPage} className='cursor-pointer hover:bg-indigo-600  dark:bg-[#1e1e1e] dark:hover:bg-yellow-600 hover:text-white px-4 py-2 group-hover:px-2 group-hover:mx-1 group-hover:rounded bg-white'>
                         <ChevronDoubleRight className={'w-4 h-4'} />
                     </div>
                 </div>
@@ -76,7 +76,7 @@ const PaginationNumber = ({ page, totalPage }) => {
                 rel="next"
                 className={`${+showNext ? 'block' : 'invisible'} `}>
 
-                <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white border rounded-lg cursor-pointer group">
+                <div className="relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group">
                     <i className="fas fa-angle-right mr-2 transition-all duration-200 transform group-hover:translate-x-6" />
                     <div className="absolute -translate-x-10 ml-2 opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:-translate-x-2">
                         {locale.PAGINATION.NEXT}
@@ -103,9 +103,9 @@ function getPageElement(page, currentPage, pagePrefix) {
             passHref
             className={
                 (selected
-                  ? 'bg-indigo-600 dark:bg-indigo-500 text-white '
-                  : 'bg-white') +
-                ' hover:border-indigo-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
+                  ? 'bg-indigo-600 dark:bg-yellow-600 text-white '
+                  : 'dark:bg-[#1e1e1e]') +
+                ' hover:border-indigo-600 dark:hover:bg-yellow-600 dark:border-gray-600 px-4 border py-2 rounded-lg drop-shadow-sm duration-200 transition-colors'
             }>
 
             {page}
diff --git a/themes/heo/components/TagGroups.js b/themes/heo/components/TagGroups.js
index f431c998..9306cf29 100644
--- a/themes/heo/components/TagGroups.js
+++ b/themes/heo/components/TagGroups.js
@@ -10,7 +10,7 @@ import Link from 'next/link'
 const TagGroups = ({ tags, currentTag }) => {
   if (!tags) return <></>
   return (
-        <div id='tags-group' className='dark:border-gray-600 space-y-2'>
+        <div id='tags-group' className='dark:border-gray-700 space-y-2'>
             {
                 tags.map(tag => {
                   return <>
diff --git a/themes/heo/components/TagItemMini.js b/themes/heo/components/TagItemMini.js
index ca598add..69668a61 100644
--- a/themes/heo/components/TagItemMini.js
+++ b/themes/heo/components/TagItemMini.js
@@ -7,7 +7,7 @@ const TagItemMini = ({ tag, selected = false }) => {
       key={tag}
       href={selected ? '/' : `/tag/${encodeURIComponent(tag.name)}`}
       passHref
-      className={'cursor-pointer inline-block hover:text-indigo-600  duration-200 py-0.5 px-1 text-sm whitespace-nowrap ' }>
+      className={'cursor-pointer inline-block hover:text-indigo-600 dark:text-white duration-200 py-0.5 px-1 text-sm whitespace-nowrap ' }>
       <div className='font-light flex items-center'><HashTag className='text-gray-500 stroke-2 mr-0.5 w-3 h-3'/> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
 
     </Link>
diff --git a/themes/heo/index.js b/themes/heo/index.js
index 795d6ea0..aa74454a 100644
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -49,7 +49,7 @@ const LayoutBase = props => {
   }
 
   return (
-        <div id='theme-heo' className='bg-[#f7f9fe] h-full min-h-screen flex flex-col overflow-hidden'>
+        <div id='theme-heo' className='bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col overflow-hidden'>
             {/* 网页SEO */}
             <CommonHead meta={meta} siteInfo={siteInfo} />
             <Style />
@@ -118,7 +118,14 @@ const LayoutIndex = (props) => {
         <Hero {...props} />
     </header>
 
-  return <LayoutPostList {...props} headerSlot={headerSlot} />
+  // 右侧栏 用户信息+标签列表
+  const slotRight = <SideRight {...props} />
+
+  return <LayoutBase {...props} slotRight={slotRight} headerSlot={headerSlot}>
+        {/* 文章分类条 */}
+        <CategoryBar {...props} />
+        {BLOG.POST_LIST_STYLE === 'page' ? <BlogPostListPage {...props} /> : <BlogPostListScroll {...props} />}
+    </LayoutBase>
 }
 
 /**
@@ -301,7 +308,7 @@ const Layout404 = props => {
                             {/* eslint-disable-next-line @next/next/no-img-element */}
                             <img className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></img>
 
-                           {/* 右侧文字 */}
+                            {/* 右侧文字 */}
                             <div className='error-info flex-1 flex flex-col justify-center items-center space-y-4'>
                                 <h1 className='error-title font-extrabold md:text-9xl text-7xl'>404</h1>
                                 <div>请尝试站内搜索寻找文章</div>