Fix dark style

lvwzhen · Apr 22, 2023 · 56cd0a9 · 56cd0a9 · vercel · Apr 22, 2023
1 parent d148343
commit 56cd0a9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/components/SearchDialog.tsx b/components/SearchDialog.tsx
@@ -178,6 +178,8 @@ export function SearchDialog() {
         text-slate-500 dark:text-slate-400  hover:text-slate-700 dark:hover:text-slate-300
         transition-colors
         rounded-full
+        dark:bg-slate-800
+        dark:hover:bg-slate-700
         bg-white/50 backdrop-blur-sm hover:bg-white/80
         border border-slate-200 dark:border-slate-500 hover:border-slate-300 dark:hover:border-slate-500
         w-full

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -35,7 +35,7 @@ export default function Home() {
         `}
       </Script>
       <main className={styles.main}>
-        <h1 className='text-slate-700 font-bold text-2xl mb-12 flex items-center gap-3'><Image src={'/logo.png'} width="32" height="32" alt="MagickPen logo" /> AI 法律助手</h1>
+        <h1 className='text-slate-700 font-bold text-2xl mb-12 flex items-center gap-3 dark:text-slate-400'><Image src={'/logo.png'} width="32" height="32" alt="MagickPen logo" /> AI 法律助手</h1>
         <div className={styles.center}>
           <SearchDialog />
         </div>
@@ -44,19 +44,27 @@ export default function Home() {
           <h2 className='text-slate-500'>更多好玩</h2>
           <ul className='grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-5 mt-4 max-w-lg mx-auto text-xs'>
             <li>
-              <Link href="https://magickpen.com/?ref=lawcnai" className=' text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
+              <Link href="https://magickpen.com/?ref=lawcnai" className=' 
+              dark:bg-white/30
+              dark:text-slate-900
+              dark:border-slate-900
+               text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
                 <Image src={'/MagickPen.png'}  width={100} height="20" className='w-full mb-1 h-5 object-contain' alt="MagickPen - 智能写作助手" />
                 智能写作助手
               </Link>
             </li>
             <li>
-              <Link href="https://www.teach-anything.com/?ref=lawcnai" className=' text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
+              <Link href="https://www.teach-anything.com/?ref=lawcnai" className='dark:bg-white/30
+              dark:border-slate-900
+              dark:text-slate-900 text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
                 <Image src={'/TeachAnything.png'} width={100} height="20" className='w-full mb-1 h-5 object-contain' alt="Teach Anything - AI 百科全书" />
                 AI 百科全书
               </Link>
             </li>
             <li>
-              <Link href="https://openl.io/?ref=lawcnai" className=' text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
+              <Link href="https://openl.io/?ref=lawcnai" className='dark:bg-white/30
+              dark:border-slate-900
+              dark:text-slate-900 text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
                 <Image src={'/OpenL.png'} width={100} height="20" className='w-full mb-1 h-5 object-contain' alt="OpenL - AI 翻译专家" />
                 AI 翻译专家
               </Link>