不同主题色下使用合适的场景背景颜色

public/4dage.js

@@ -77,7 +77,7 @@ var Clamp = function (e, t, i) {
   }
 // 在此配置三维场景
 fdage = {
-  transparentBackground: true,
+  // transparentBackground: true,
 },
 function (I) {
   "use strict"
@@ -5014,13 +5014,19 @@ function (I) {
   }
   ,
   _.prototype.setClearColor = function () {
-    if (I.transparentBackground)
+    if (I.transparentBackground) {
       this.gl.clearColor(0, 0, 0, 0)
-    else if (this.backgroundMode < 1) {
-      var e = this.backgroundColor
-      this.gl.clearColor(e[0], e[1], e[2], 1)
-    } else
+    } else if (this.backgroundMode < 1) {
+      // var e = this.backgroundColor
+      // this.gl.clearColor(e[0], e[1], e[2], 1)
+      if (window.isDarkTheme.value) {
+        this.gl.clearColor(0.19, 0.19, 0.19, 1)
+      } else {
+        this.gl.clearColor(0.91, 0.91, 0.91, 1)
+      }
+    } else {
       this.gl.clearColor(.0582, .06772, .07805, 1)
+    }
   }
   ,
   _.prototype.draw = function (e) {
@@ -5766,16 +5772,8 @@ function (I) {
   j.prototype.signalLoadProgress = function (e, t) {
     if (this.thumbnail) {
       if (!this.progressBar) {
-        let useDarkTheme = false
-        if (
-          localStorage.getItem('useDarkTheme') === '1' ||
-          (!localStorage.getItem('useDarkTheme') && gConfigInfo.defaultDarkTheme)
-        ) {
-          useDarkTheme = true
-        }
-
         var i = document.createElement("div")
-        i.style.backgroundColor = useDarkTheme ? '#000' : "#fff",
+        i.style.backgroundColor = window.isDarkTheme.value ? '#000' : "#fff",
         i.style.opacity = .9,
         i.style.position = "absolute",
         i.style.zIndex = 999
@@ -5785,7 +5783,7 @@ function (I) {
         i.style.height = "3px",
         i.style["border-radius"] = "1px",
         this.progressBar = document.createElement("div"),
-        this.progressBar.style.backgroundColor = useDarkTheme ? '#fff' : "#C5C9C9",
+        this.progressBar.style.backgroundColor = window.isDarkTheme.value ? '#fff' : "#C5C9C9",
         this.progressBar.style.position = "absolute",
         this.progressBar.style.left = this.progressBar.style.bottom = "0px",
         this.progressBar.style.height = "100%",
@@ -6288,6 +6286,9 @@ function (I) {
       }
         .bind(this)
       C.fetchBinary(this.sceneURL, e, i, t)
+      window.isDarkThemeChangeCb = () => {
+        this.wake()
+      }
     }
   }
   ,

src/main.js

@@ -19,6 +19,8 @@ if (
   (!localStorage.getItem('useDarkTheme') && gConfigInfo.defaultDarkTheme)
 ) {
   store.commit('setIsDarkTheme', true)
+} else {
+  store.commit('setIsDarkTheme', false)
 }
 
 const app = createApp(App)

src/store/index.js

@@ -2,7 +2,7 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    isDarkTheme: false,
+    isDarkTheme: undefined,
   },
   getters: {
   },
@@ -10,6 +10,25 @@ export default createStore({
     setIsDarkTheme(state, value) {
       state.isDarkTheme = value
       localStorage.setItem('useDarkTheme', value ? '1' : '0')
+
+      if (!window.isDarkTheme) {
+        window.isDarkThemeChangeCb = null
+        window.isDarkTheme = new Proxy({
+          value: true,
+        }, {
+          set: function(obj, prop, value) {
+            // The default behavior to store the value
+            obj[prop] = value
+            if (window.isDarkThemeChangeCb) {
+              window.isDarkThemeChangeCb(obj, prop, value)
+            }
+
+            // 表示成功
+            return true
+          }
+        })
+      }
+      window.isDarkTheme.value = value
     },
   },
   actions: {