fix(theme): prevent flash of different theme

Akryum · Akryum · commit fd42e7442581 · 2020-08-29T17:48:09.000+02:00
diff --git a/packages/app-frontend/src/features/App.vue b/packages/app-frontend/src/features/App.vue
@@ -4,12 +4,15 @@ import AppConnecting from './connection/AppConnecting.vue'
 import AppDisconnected from './connection/AppDisconnected.vue'
 import ErrorOverlay from './error/ErrorOverlay.vue'
 import { useAppConnection } from './connection'
-import { isChrome } from '@vue-devtools/shared-utils'
+import { isChrome, setStorage, getStorage } from '@vue-devtools/shared-utils'
 import SharedData, { watchSharedData, onSharedDataInit } from '@utils/shared-data'
 import { darkMode } from '@front/util/theme'
+import { onMounted } from '@vue/composition-api'
 
 const chromeTheme = isChrome ? chrome.devtools.panels.themeName : undefined
 
+const STORAGE_PREVIOUS_SESSION_THEME = 'previous-session-theme'
+
 export default {
   name: 'App',
 
@@ -23,8 +26,7 @@ export default {
   setup () {
     const { isConnected, isInitializing } = useAppConnection()
 
-    function updateTheme () {
-      const theme = SharedData.theme
+    function updateTheme (theme) {
       if (theme === 'dark' || theme === 'high-contrast' || (theme === 'auto' && chromeTheme === 'dark')) {
         document.body.classList.add('vue-ui-dark-mode')
         darkMode.value = true
@@ -37,14 +39,23 @@ export default {
       } else {
         document.body.classList.remove('vue-ui-high-contrast')
       }
+      setStorage(STORAGE_PREVIOUS_SESSION_THEME, theme)
     }
 
     onSharedDataInit(() => {
-      updateTheme()
+      updateTheme(SharedData.theme)
+    })
+
+    watchSharedData('theme', (value) => {
+      updateTheme(value)
     })
 
-    watchSharedData('theme', () => {
-      updateTheme()
+    onMounted(() => {
+      // Apply last session theme to prevent flashes of different theme
+      const previousTheme = getStorage(STORAGE_PREVIOUS_SESSION_THEME)
+      if (previousTheme) {
+        updateTheme(previousTheme)
+      }
     })
 
     return {
diff --git a/packages/app-frontend/src/features/connection/AppConnecting.vue b/packages/app-frontend/src/features/connection/AppConnecting.vue
@@ -12,18 +12,6 @@
   </div>
 </template>
 
-<script>
-import { isChrome } from '@utils/env'
-
-export default {
-  data () {
-    return {
-      theme: isChrome ? chrome.devtools.panels.themeName : 'light'
-    }
-  }
-}
-</script>
-
 <style lang="stylus" scoped>
 .app-connecting
   width 100%
@@ -33,7 +21,7 @@ export default {
   justify-content center
   background white
 
-  &.theme-dark
+  .vue-ui-dark-mode &
     background $vue-ui-color-almost-black
 
 .animation-inner
diff --git a/packages/app-frontend/src/index.js b/packages/app-frontend/src/index.js
@@ -5,9 +5,6 @@ import { initStorage } from '@utils/storage'
 import { createApp, connectApp } from './app'
 import { setAppConnected } from './features/connection'
 
-const app = createApp()
-app.$mount('#app')
-
 /**
  * Create the main devtools app. Expects to be called with a shell interface
  * which implements a connect method.
@@ -18,6 +15,8 @@ app.$mount('#app')
  */
 export async function initDevTools (shell) {
   await initStorage()
+  const app = createApp()
+  app.$mount('#app')
   connectApp(app, shell)
   shell.onReload(() => {
     setAppConnected(false)
