PLOG 主题适配浅色模式

Han-Orz · Sep 14, 2023 · 303045e · 303045e
1 parent e3a2728
commit 303045e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 22 deletions.
diff --git a/themes/plog/components/BlogPost.js b/themes/plog/components/BlogPost.js
@@ -36,10 +36,10 @@ const BlogPost = (props) => {
 
             <LazyImage src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover filter contrast-120' />
 
-            <h2 className="text-md absolute left-0 bottom-0 m-4 text-black dark:text-gray-100 text-shadow">
+            <h2 className="text-md absolute left-0 bottom-0 m-4 text-gray-100 shadow-text">
                 {post?.title}
             </h2>
-            {post?.category && <div className='text-xs rounded-lg absolute left-0 top-0 m-4 px-2 py-1 bg-black bg-opacity-25 hover:bg-blue-700 hover:text-white duration-200'>
+            {post?.category && <div className='text-xs rounded-lg absolute left-0 top-0 m-4 px-2 py-1 bg-gray-200 dark:bg-black dark:bg-opacity-25 hover:bg-blue-700 hover:text-white duration-200'>
                 <Link href={`/category/${post?.category}`}>
                 {post?.category}
                 </Link>

diff --git a/themes/plog/components/BottomNav.js b/themes/plog/components/BottomNav.js
@@ -13,7 +13,7 @@ import LogoBar from './LogoBar'
  */
 const BottomNav = props => {
   return <>
-        <div id="bottom-nav" style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} className={'z-20 px-4 hidden glassmorphism md:fixed bottom-0 w-screen py-4 md:flex flex-row justify-between items-center'}>
+        <div id="bottom-nav" className={'dark:bg-black dark:bg-opacity-50z-20 px-4 hidden glassmorphism md:fixed bottom-0 w-screen py-4 md:flex flex-row justify-between items-center'}>
             {/* 左侧logo文字栏 */}
             <LogoBar {...props}/>
             {/* 右下角菜单栏 */}

diff --git a/themes/plog/index.js b/themes/plog/index.js
@@ -18,7 +18,6 @@ import ShareBar from '@/components/ShareBar'
 import Link from 'next/link'
 import { Transition } from '@headlessui/react'
 import BottomNav from './components/BottomNav'
-import { saveDarkModeToCookies } from '@/themes/theme'
 import Modal from './components/Modal'
 import { Style } from './style'
 import replaceSearchResult from '@/components/Mark'
@@ -36,29 +35,13 @@ export const usePlogGlobal = () => useContext(ThemeGlobalPlog)
  */
 const LayoutBase = props => {
   const { children, topSlot, meta } = props
-  const { onLoading, updateDarkMode } = useGlobal()
+  const { onLoading } = useGlobal()
   const [showModal, setShowModal] = useState(false)
   const [modalContent, setModalContent] = useState(null)
 
-  // 用户手动设置主题
-  const setDarkMode = () => {
-    saveDarkModeToCookies(true)
-    updateDarkMode(true)
-    const htmlElement = document.getElementsByTagName('html')[0]
-    htmlElement.classList?.remove('light')
-    htmlElement.classList?.add('dark')
-  }
-
-  // plog主题默认 深色模式
-  useEffect(() => {
-    setTimeout(() => {
-      setDarkMode()
-    }, 100)
-  }, [])
-
   return (
     <ThemeGlobalPlog.Provider value={{ showModal, setShowModal, modalContent, setModalContent }}>
-        <div id='theme-plog' className='plog relative dark:text-gray-300 w-full bg-black min-h-screen'>
+        <div id='theme-plog' className='plog relative dark:text-gray-300 w-full dark:bg-black min-h-screen'>
             {/* SEO相关 */}
             <CommonHead meta={meta}/>
             <Style/>