黑暗模式

conf/dev.config.js

@@ -19,7 +19,7 @@ module.exports = {
   BUNDLE_ANALYZER: process.env.ANALYZE === 'true' || false, // 是否展示编译依赖内容与大小
   VERSION: (() => {
     try {
-      // 优先使用环境变量，否则从package.json中获取版本号
+      // 优先使用环境变量，否则从 package.json 中获取版本号
       return (
         process.env.NEXT_PUBLIC_VERSION || require('../package.json').version
       )

themes/typography/components/BlogItem.js

@@ -15,9 +15,7 @@ export const BlogItem = props => {
   const showPreview =
     siteConfig('POST_LIST_PREVIEW', false, NOTION_CONFIG) && post.blockMap
   return (
-    <div
+    <div key={post.id} className='h-42 my-6 pb-7'>
-      key={post.id}
-      className='h-42 my-6 pb-7'>
       {/* 文章标题 */}
 
       <div className='flex'>
@@ -39,7 +37,7 @@ export const BlogItem = props => {
           <h2 className='mb-2'>
             <Link
               href={post.href}
-              className='text-xl underline decoration-2 font-bold text-[var(--primary-color)]'>
+              className='text-xl underline decoration-2 font-bold text-[var(--primary-color)] dark:text-white dark:hover:bg-white dark:hover:text-[var(--primary-color)] px-2 duration-200 transition-all rounded-sm'>
               {siteConfig('POST_TITLE_ICON') && (
                 <NotionIcon icon={post.pageIcon} />
               )}
@@ -99,7 +97,6 @@ export const BlogItem = props => {
           </main>
         </article>
       </div>
-
     </div>
   )
 }

themes/typography/components/BlogListPage.js

@@ -35,7 +35,7 @@ export default function BlogListPage(props) {
     .replace('.html', '')
 
   return (
-    <div className='w-full md:pr-8 mb-12'>
+    <div className='w-full md:pr-8 mb-12 px-5'>
       <div id='posts-wrapper'>
         {posts?.map((p, index) => (
           <div key={p.id}>

themes/typography/components/Footer.js

@@ -18,19 +18,11 @@ export default function Footer(props) {
     <footer>
       <DarkModeButton className='pt-4' />
 
-      <div className='font-bold text-[var(--primary-color)] py-6 text-sm flex flex-col gap-2 items-center'>
+      <div className='font-bold text-[var(--primary-color)] dark:text-white py-6 text-sm flex flex-col gap-2 items-center'>
         <div>
           &copy;{`${copyrightDate}`} {siteConfig('AUTHOR')}.
         </div>
         <div>All rights reserved.</div>
-        <div>
-          Powered by
-          <a
-            href='https://github.com/tangly1024/NotionNext'
-            className=' hover:underline'>
-            NotionNext {siteConfig('VERSION')}
-          </a>
-        </div>
       </div>
     </footer>
   )

themes/typography/components/MenuItemDrop.js

@@ -13,7 +13,7 @@ export const MenuItemDrop = ({ link }) => {
       <Link
         href={link?.href}
         target={link?.target}
-        className=' menu-link underline decoration-2 hover:no-underline hover:bg-[#2E405B] hover:text-white text-[var(--primary-color)]  dark:text-gray-200 tracking-widest pb-1 font-bold'>
+        className='dark:hover:text-[var(--primary-color)] dark:hover:bg-white menu-link underline decoration-2 hover:no-underline hover:bg-[#2E405B] hover:text-white text-[var(--primary-color)]  dark:text-gray-200 tracking-widest pb-1 font-bold'>
         {link?.name}
       </Link>
     </div>

themes/typography/components/NavBar.js

@@ -14,19 +14,19 @@ import Link from 'next/link'
 export default function NavBar(props) {
   return (
     <div className='flex flex-col justify-between md:mt-20 md:h-[70vh]'>
-      <header className='w-fit self-center md:self-start md:pb-8 md:border-l-2 md:border-[var(--primary-color)] text-[var(--primary-color)] md:[writing-mode:vertical-lr] px-4 hover:bg-[var(--primary-color)] hover:text-white ease-in-out duration-700 md:hover:pt-4 md:hover:pb-4'>
+      <header className='w-fit self-center md:self-start md:pb-8 md:border-l-2 dark:md:border-white dark:text-white md:border-[var(--primary-color)] text-[var(--primary-color)] md:[writing-mode:vertical-lr] px-4 hover:bg-[var(--primary-color)] dark:hover:bg-white hover:text-white dark:hover:text-[var(--primary-color)] ease-in-out duration-700 md:hover:pt-4 md:hover:pb-4 mb-2'>
         <Link href='/'>
           <div className='flex flex-col-reverse md:flex-col items-center md:items-start'>
             <div className='font-bold text-4xl text-center' id='blog-name'>
-              活版印字
+              山野
-            </div>
-            <div className='font-bold text-xl text-center' id='blog-name-en'>
-              Typography
             </div>
+            {/* <div className='font-bold text-xl text-center' id='blog-name-en'>
+              Blog
+            </div> */}
           </div>
         </Link>
       </header>
-      <nav className='md:pt-0  z-20  dark:border-hexo-black-gray dark:bg-black flex-shrink-0'>
+      <nav className='md:pt-0  z-20   flex-shrink-0'>
         <div id='nav-bar-inner' className='text-sm md:text-md'>
           <MenuList {...props} />
         </div>

themes/typography/index.js

@@ -71,7 +71,7 @@ const LayoutBase = props => {
     <ThemeGlobalSimple.Provider value={{ searchModal }}>
       <div
         id='theme-typography'
-        className={`${siteConfig('FONT_STYLE')} font-typography h-screen flex flex-col dark:text-gray-300 bg-white dark:bg-black overflow-hidden`}>
+        className={`${siteConfig('FONT_STYLE')} font-typography h-screen flex flex-col dark:text-gray-300 bg-white dark:bg-[#232222] overflow-hidden`}>
         <Style />
 
         {siteConfig('SIMPLE_TOP_BAR', null, CONFIG) && <TopBar {...props} />}

themes/typography/style.js

@@ -27,7 +27,7 @@ const Style = () => {
       }
       // 底色
       .dark body {
-        background-color: black;
+        background-color: rgb(35, 34, 34);
       }
       // 文本不可选取
       .forbid-copy {
@@ -36,6 +36,15 @@ const Style = () => {
         -ms-user-select: none;
       }
 
+      .dark #theme-typography {
+        background-image: linear-gradient(
+              to right,
+              rgb(255 255 255 / 0.04) 1px,
+              transparent 1px
+            ),
+            linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px);
+      }
+
       #theme-typography {
         --primary-color: #2e405b;
         background-color: rgb(255 255 255) / 1;