From 276060cca58df1c3c2d954bf2f036e0570036133 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 10 Sep 2023 13:18:17 +0800
Subject: [PATCH] fix: adjust loading effect when injecting styles

---
 src/contentScripts/index.ts | 36 ++++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index ef0fdf79..380dc7e2 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -9,9 +9,24 @@ let app: any
 
 const isFirefox: boolean = /Firefox/i.test(navigator.userAgent)
 
-document.documentElement.style.opacity = '0'
-// document.documentElement.style.transition = 'opacity .5s ease-in-out'
-// document.documentElement.style.background = 'var(--bew-bg)'
+function injectCSS(css: string): HTMLStyleElement {
+  const el = document.createElement('style')
+  el.setAttribute('rel', 'stylesheet')
+  el.innerText = css
+  document.documentElement.appendChild(el)
+  return el
+}
+
+const beforeLoadedStyleEl = injectCSS(`
+  html.dark {
+    background: hsl(230 12% 6%);
+  }
+
+  body {
+    opacity: 0;
+  }
+`)
+
 if (isFirefox) {
   let isFirstScriptExecute = true
   document.addEventListener('beforescriptexecute', () => {
@@ -22,22 +37,15 @@ if (isFirefox) {
     isFirstScriptExecute = false
   })
   window.onload = () => {
-    nextTick(() => {
-      setTimeout(() => {
-        document.documentElement.style.opacity = '1'
-      }, 1000)
-    })
+    document.documentElement.removeChild(beforeLoadedStyleEl)
   }
 }
 else {
   document.addEventListener('DOMContentLoaded', () => {
     injectApp()
-
-    nextTick(() => {
-      setTimeout(() => {
-        document.documentElement.style.opacity = '1'
-      }, 1000)
-    })
+    window.onload = () => {
+      document.documentElement.removeChild(beforeLoadedStyleEl)
+    }
   })
 }