fix(loading animation): dark theme background

Author: Guillaume Chau

packages/app-frontend/src/AppConnecting.vue

@@ -2,6 +2,7 @@
   <div
     id="app"
     class="app-connecting"
+    :class="`theme-${theme}`"
   >
     <div class="animation-outer">
       <div class="animation-inner">
@@ -15,6 +16,18 @@
   </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%
@@ -23,6 +36,9 @@
   align-items center
   justify-content center
 
+  &.theme-dark
+    background $vue-ui-color-almost-black
+
 .animation-inner
   padding 28px 24px 16px
   background rgba($vue-ui-color-primary, .1)