feat: 主页渐变色 帅

.vitepress/theme/index.js

@@ -1,20 +1,61 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
+import { h, watch } from 'vue'
 // import Theme from 'vitepress/theme'
 import DefaultTheme from 'vitepress/theme-without-fonts'
 import './style.css'
+import './rainbow.css'
+
+let homePageStyle
+
 
 export default {
   ...DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+
     })
   },
   enhanceApp({ app, router, siteData }) {
-    // ...
-  }
+    if (typeof window === 'undefined')
+      return
+
+    watch(
+      () => router.route.data.relativePath,
+      () => updateHomePageStyle(location.pathname === '/'),
+      { immediate: true },
+    )
+  },
 }
-// export default {
-//   ...DefaultTheme,
-// }
+
+if (typeof window !== 'undefined') {
+  // detect browser, add to class for conditional styling
+  const browser = navigator.userAgent.toLowerCase()
+  if (browser.includes('chrome'))
+    document.documentElement.classList.add('browser-chrome')
+  else if (browser.includes('firefox'))
+    document.documentElement.classList.add('browser-firefox')
+  else if (browser.includes('safari'))
+    document.documentElement.classList.add('browser-safari')
+}
+
+// Speed up the rainbow animation on home page
+function updateHomePageStyle(value) {
+  if (value) {
+    if (homePageStyle)
+      return
+
+    homePageStyle = document.createElement('style')
+    homePageStyle.innerHTML = `
+    :root {
+      animation: rainbow 12s linear infinite;
+    }`
+    document.body.appendChild(homePageStyle)
+  }
+  else {
+    if (!homePageStyle)
+      return
+
+    homePageStyle.remove()
+    homePageStyle = undefined
+  }
+}