From c2075dde1ce42b729ed823005926a14abab6ec7d Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 16 Mar 2022 13:00:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=87=E6=8D=A2=E4=B8=BB=E9=A2=98=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js            |  1 +
 components/ThemeSwitch.js | 39 +++++++++++++++++++++++++++++++++++++++
 pages/_app.js             |  2 ++
 3 files changed, 42 insertions(+)
 create mode 100644 components/ThemeSwitch.js

diff --git a/blog.config.js b/blog.config.js
index 3dbd6a1d..258ef3fd 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -11,6 +11,7 @@ const BLOG = {
   DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
 
   THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium']
+  THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
   LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
   SINCE: 2021, // e.g if leave this empty, current year will be used.
   BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
new file mode 100644
index 00000000..d4a10e7d
--- /dev/null
+++ b/components/ThemeSwitch.js
@@ -0,0 +1,39 @@
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import { ALL_THEME } from '@/lib/theme'
+
+/**
+ *
+ * @returns 主题切换
+ */
+export function ThemeSwitch () {
+  const GlobalConfig = useGlobal()
+  const router = useRouter()
+  const { theme, setTheme } = GlobalConfig
+  const themeOptions = []
+  ALL_THEME.forEach(t => {
+    themeOptions.push({ value: t, text: t })
+  })
+
+  function switchTheme () {
+    const currentIndex = ALL_THEME.indexOf(theme)
+    const newIndex = currentIndex < ALL_THEME.length - 1 ? currentIndex + 1 : 0
+    changeTheme(ALL_THEME[newIndex])
+  }
+  /**
+   * 切换主题
+   */
+  function changeTheme (theme) {
+    router.query.theme = ''
+    setTheme(theme)
+  }
+
+  return (
+    <div draggable="true" className="fixed left-4 bottom-12 text-white bg-black rounded z-50">
+      <div className="p-2 cursor-pointer" onClick={switchTheme}>
+        <i className="fas fa-sync mr-1" />
+        切换主题：{theme}
+      </div>
+    </div>
+  )
+}
diff --git a/pages/_app.js b/pages/_app.js
index 143b0d2e..ecf1c2ad 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -15,6 +15,7 @@ import 'katex/dist/katex.min.css'
 import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'
+import { ThemeSwitch } from '@/components/ThemeSwitch'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
@@ -24,6 +25,7 @@ const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr:
 const MyApp = ({ Component, pageProps }) => {
   return (
     <GlobalContextProvider>
+        {BLOG.THEME_SWITCH && <ThemeSwitch/>}
         {BLOG.DEBUG && <DebugPanel/>}
         {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
         {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}