heo 主题一点细节

Author: tangly1024

themes/heo/components/PaginationNumber.js

@@ -56,7 +56,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 dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
+          <div className='hover:border-indigo-600 dark:hover:border-yellow-600 relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border dark:border-gray-600 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}
@@ -69,7 +69,7 @@ const PaginationNumber = ({ page, totalPage }) => {
           {pages}
 
           {/* 跳转页码 */}
-          <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'>
+          <div className='bg-white hover:bg-gray-100 dark:hover:bg-yellow-600  dark:bg-[#1e1e1e]  h-10 border dark:border-gray-600 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'
@@ -90,7 +90,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 dark:bg-[#1e1e1e] border rounded-lg cursor-pointer group'>
+          <div className='hover:border-indigo-600 dark:hover:border-yellow-600 relative w-24 h-10 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border dark:border-gray-600 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}

themes/heo/components/PostHeader.js

@@ -12,7 +12,7 @@ import WavesArea from './WavesArea'
  * @param {*} param0
  * @returns
  */
-export default function PostHeader({ post, siteInfo }) {
+export default function PostHeader({ post, siteInfo, isDarkMode }) {
   if (!post) {
     return <></>
   }
@@ -31,19 +31,21 @@ export default function PostHeader({ post, siteInfo }) {
           height: 100%;
           top: 0;
           left: 0;
-          box-shadow: 110px -130px 300px 60px #0060e0 inset;
+          box-shadow: 110px -130px 500px 100px ${isDarkMode
+              ? '#CA8A04'
+              : '#0060e0'} inset;
         }
       `}</style>
 
       <div
         style={{ backdropFilter: 'blur(15px)' }}
-        className={
-          'bg-[#0060e0] absolute top-0 w-full h-full py-10 flex justify-center items-center'
-        }>
+        className={`${isDarkMode ? 'bg-[#CA8A04]' : 'bg-[#0060e0]'} absolute top-0 w-full h-full py-10 flex justify-center items-center`}>
         {/* 文章背景图 */}
         <div
           id='post-cover-wrapper'
-          style={{ filter: 'blur(15px)' }}
+          style={{
+            filter: 'blur(15px)'
+          }}
           className='coverdiv lg:translate-x-96 opacity-50 lg:rotate-12'>
           <LazyImage
             id='post-cover'

themes/heo/components/SideRight.js

@@ -50,7 +50,7 @@ export default function SideRight(props) {
         {/* 最新文章列表 */}
         <div
           className={
-            'border dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'
+            'border hover:border-indigo-600  dark:hover:border-yellow-600 duration-200 dark:border-gray-700 dark:bg-[#1e1e1e] dark:text-white rounded-xl lg:p-6 p-4 hidden lg:block bg-white'
           }>
           <LatestPostsGroupMini {...props} />
         </div>
@@ -61,7 +61,10 @@ export default function SideRight(props) {
         <Live2D />
 
         {/* 标签和成绩 */}
-        <Card className={'bg-white dark:bg-[#1e1e1e] dark:text-white'}>
+        <Card
+          className={
+            'bg-white dark:bg-[#1e1e1e] dark:text-white hover:border-indigo-600  dark:hover:border-yellow-600 duration-200'
+          }>
           <TagGroups tags={sortedTags} currentTag={currentTag} />
           <hr className='mx-1 flex border-dashed relative my-4' />
           <AnalyticsCard {...props} />

themes/heo/index.js

@@ -52,7 +52,7 @@ const LayoutBase = props => {
   const { children, slotTop, className } = props
 
   // 全屏模式下的最大宽度
-  const { fullWidth } = useGlobal()
+  const { fullWidth, isDarkMode } = useGlobal()
   const router = useRouter()
 
   const headerSlot = (
@@ -67,7 +67,7 @@ const LayoutBase = props => {
           <Hero {...props} />
         </>
       ) : null}
-      {fullWidth ? null : <PostHeader {...props} />}
+      {fullWidth ? null : <PostHeader {...props} isDarkMode={isDarkMode} />}
     </header>
   )