Medium 适配夜间模式

themes/Medium/LayoutBase.js

@@ -23,7 +23,7 @@ const LayoutBase = props => {
   const router = useRouter()
 
   return (
-    <div className='bg-white w-full h-full min-h-screen justify-center'>
+    <div className='bg-white dark:bg-gray-800 w-full h-full min-h-screen justify-center dark:text-gray-300'>
       <CommonHead meta={meta} />
       <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
         {/* 桌面端左侧菜单 */}
@@ -39,7 +39,7 @@ const LayoutBase = props => {
         </div>
 
         {/* 桌面端右侧 */}
-        <div className='hidden xl:block border-l w-96'>
+        <div className='hidden xl:block border-l dark:border-gray-500 w-96'>
           <Tabs className='py-14 px-6 sticky top-0'>
             {slotRight}
             <div key={locale.NAV.ABOUT}>

themes/Medium/LayoutSlug.js

@@ -83,7 +83,7 @@ export const LayoutSlug = props => {
       showInfoCard={true}
       slotRight={slotRight}
     >
-      <h1 className="text-4xl pt-12 font-sans">{post?.title}</h1>
+      <h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
       <section className="flex py-4 items-center font-sans px-1">
         <Link href="/about" passHref>
           <>

themes/Medium/components/Catalog.js

@@ -62,7 +62,7 @@ const Catalog = ({ toc }) => {
           <a
             key={id}
             href={`#${id}`}
-            className={`notion-table-of-contents-item duration-300 transform font-light
+            className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
           >
                       <span

themes/Medium/components/InfoCard.js

@@ -17,8 +17,8 @@ const InfoCard = () => {
           className='rounded-full'
         />
         </div>
-        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center'>{BLOG.AUTHOR}</div>
+        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
-        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center'>{BLOG.BIO}</div>
+        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
         <SocialButton/>
     </div>
   </div>

themes/Medium/components/LogoBar.js

@@ -6,7 +6,7 @@ export default function LogoBar () {
     <div className='flex mx-auto w-full  justify-between '>
       <div className='space-x-3 flex items-center'>
         <Link href='/'>
-          <a className='text-2xl'>{BLOG.TITLE}</a>
+          <a className='text-2xl dark:text-gray-200'>{BLOG.TITLE}</a>
         </Link>
       </div>
     </div>

themes/Medium/components/SearchInput.js

@@ -74,14 +74,14 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
       defaultValue={currentSearch}
     />
 
-    <div className='-ml-8 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'
+    <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
       onClick={handleSearch}>
-        <i className={`hover:text-black transform duration-200 text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
+        <i className={`hover:text-black transform duration-200 text-gray-500  dark:hover:text-gray-300 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
     </div>
 
     {(showClean &&
-      <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
+      <div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
-        <i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer' onClick={cleanSearch} />
+        <i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer   dark:hover:text-gray-300' onClick={cleanSearch} />
       </div>
       )}
   </div>

themes/Medium/components/TopNavBar.js

@@ -12,7 +12,7 @@ export default function TopNavBar (props) {
   const router = useRouter()
 
   return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-50 ' + className}>
-    <div className='flex w-full h-12 shadow bg-white px-5 items-between'>
+    <div className='flex w-full h-12 shadow bg-white dark:bg-gray-900 px-5 items-between'>
       <LogoBar />
 
       {/* 顶部菜单 */}
@@ -21,8 +21,8 @@ export default function TopNavBar (props) {
           if (link.show) {
             const selected = (router.pathname === link.to) || (router.asPath === link.to)
             return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
-            <a className={'px-5 duration-300 text-base justify-between  hover:underline cursor-pointer flex flex-nowrap items-center ' +
+            <a className={'px-5 duration-300 text-base justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
-                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600 ')} >
+                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
                 <div className='items-center justify-center flex '>
                   <i className={link.icon} />
                   <div className='ml-4 whitespace-nowrap'>{link.name}</div>

themes/index.js

@@ -5,5 +5,5 @@
 // export * from './Empty' //  空主题
 export * from './NEXT'
 // export * from './Fukasawa'
-export * from './Hexo'
+// export * from './Hexo'
-// export * from './Medium'
+export * from './Medium'