切换主题按钮

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

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>
+  )
+}

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 />}