添加移动端浏览器顶部样式

src/App.vue

@@ -2,12 +2,20 @@
 import {onMounted} from "vue";
 import emitter from "@/utils/mitt.ts";
 import NavBar from "@/components/nav/NavBar.vue";
+import {removeMobileTopColor, setMobileTopColor} from "@/utils/function.ts";
 
 const loadingElement = document.getElementById("loading") as HTMLDivElement;
 
 onMounted(() => {
-  emitter.on('startLoading', on =>
-      on ? loadingElement.classList.remove('stop') : loadingElement.classList.add('stop')
+  emitter.on('startLoading', on => {
+        if (on) {
+          loadingElement.classList.remove('stop')
+          removeMobileTopColor()
+        } else {
+          loadingElement.classList.add('stop')
+          setMobileTopColor()
+        }
+      }
   )
 })
 </script>

src/utils/function.ts

@@ -13,3 +13,22 @@ export const debounce = (fn: Function, delay: number) => {
     }, delay)
   }
 }
+
+export const setMobileTopColor = () => {
+  const lightMeta = document.createElement('meta');
+  lightMeta.setAttribute('name', 'theme-color');
+  lightMeta.setAttribute('media', '(prefers-color-scheme: light)');
+  lightMeta.setAttribute('content', '#60a5fa');
+
+  const darkMeta = document.createElement('meta');
+  darkMeta.setAttribute('name', 'theme-color');
+  darkMeta.setAttribute('media', '(prefers-color-scheme: dark)');
+  darkMeta.setAttribute('content', '#60a5fa');
+
+  document.head.appendChild(lightMeta);
+  document.head.appendChild(darkMeta);
+}
+
+export const removeMobileTopColor = () => {
+  document.querySelectorAll('meta[name="theme-color"]').forEach(meta => meta.remove());
+}