Merge pull request #1303 from jxpeng98/back-ground-bug

修复heo暗黑模式下，右侧最新文章列表背景仍为白色bug，并且在上部导航栏添加暗黑模式切换按钮

themes/heo/components/DarkModeButton.js

@@ -0,0 +1,38 @@
+import { useGlobal } from '@/lib/global'
+import { saveDarkModeToCookies } from '@/themes/theme'
+import { Moon, Sun } from '@/components/HeroIcons'
+import { useImperativeHandle } from 'react'
+
+/**
+ * 深色模式按钮
+ */
+const DarkModeButton = (props) => {
+  const { cRef, className } = props
+  const { isDarkMode, updateDarkMode } = useGlobal()
+
+  /**
+   * 对外暴露方法
+   */
+  useImperativeHandle(cRef, () => {
+    return {
+      handleChangeDarkMode: () => {
+        handleChangeDarkMode()
+      }
+    }
+  })
+
+  // 用户手动设置主题
+  const handleChangeDarkMode = () => {
+    const newStatus = !isDarkMode
+    saveDarkModeToCookies(newStatus)
+    updateDarkMode(newStatus)
+    const htmlElement = document.getElementsByTagName('html')[0]
+    htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
+    htmlElement.classList?.add(newStatus ? 'dark' : 'light')
+  }
+
+  return <div onClick={handleChangeDarkMode} className={`${className || ''} cursor-pointer hover: scale-100 hover:bg-black hover:bg-opacity-10 rounded-full w-10 h-10 flex justify-center items-center duration-200 transition-all`}>
+    <div id='darkModeButton' className=' cursor-pointer hover: scale-50 w-10 h-10 '> {isDarkMode ? <Sun /> : <Moon />}</div>
+  </div>
+}
+export default DarkModeButton

themes/heo/components/NavBar.js

@@ -3,6 +3,7 @@ import Logo from './Logo'
 import throttle from 'lodash.throttle'
 import RandomPostButton from './RandomPostButton'
 import SearchButton from './SearchButton'
+import DarkModeButton from './DarkModeButton'
 import SlideOver from './SlideOver'
 import ReadingProgress from './ReadingProgress'
 import { MenuListTop } from './MenuListTop'
@@ -145,6 +146,7 @@ const NavBar = props => {
                 <div className='flex flex-shrink-0 justify-center items-center space-x-1'>
                     <RandomPostButton {...props} />
                     <SearchButton />
+                    {!JSON.parse(BLOG.THEME_SWITCH) && <DarkModeButton {...props} />}
                     <ReadingProgress />
 
                     {/* 移动端菜单按钮 */}

themes/heo/components/SideRight.js

@@ -48,7 +48,7 @@ export default function SideRight(props) {
                 <TouchMeCard />
 
                 {/* 最新文章列表 */}
-                <div className={'border dark:border-gray-700 rounded-xl lg:p-6 p-4 hidden lg:block bg-white'}>
+                <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'}>
                     <LatestPostsGroupMini {...props} />
                 </div>