fix(ui): darkMode lost on cache reset

Guillaume Chau · Guillaume Chau · commit b4f6b3c89f4e · 2018-06-20T14:15:24.000+02:00
diff --git a/packages/@vue/cli-ui/src/components/StatusBar.vue b/packages/@vue/cli-ui/src/components/StatusBar.vue
@@ -166,12 +166,6 @@ export default {
 
     async applyDarkMode (enabled) {
       localStorage.setItem('vue-ui-dark-mode', enabled.toString())
-      const el = document.getElementsByTagName('html')[0]
-      if (enabled) {
-        el.classList.add('vue-ui-dark-mode')
-      } else {
-        el.classList.remove('vue-ui-dark-mode')
-      }
       await this.$apollo.mutate({
         mutation: DARK_MODE_SET,
         variables: {
diff --git a/packages/@vue/cli-ui/src/state/resolvers.js b/packages/@vue/cli-ui/src/state/resolvers.js
@@ -22,6 +22,12 @@ export default {
         darkMode: enabled
       }
       cache.writeData({ data })
+      const el = document.getElementsByTagName('html')[0]
+      if (enabled) {
+        el.classList.add('vue-ui-dark-mode')
+      } else {
+        el.classList.remove('vue-ui-dark-mode')
+      }
       return null
     }
   }
diff --git a/packages/@vue/cli-ui/src/vue-apollo.js b/packages/@vue/cli-ui/src/vue-apollo.js
@@ -7,6 +7,7 @@ import clientStateResolvers from './state/resolvers'
 // import CONNECTED from './graphql/connected.gql'
 import CONNECTED_SET from './graphql/connectedSet.gql'
 import LOADING_CHANGE from './graphql/loadingChange.gql'
+import DARK_MODE_SET from './graphql/darkModeSet.gql'
 
 // Install the vue plugin
 Vue.use(VueApollo)
@@ -67,6 +68,13 @@ export async function resetApollo () {
   } catch (e) {
     // Potential errors
   }
+  const raw = localStorage.getItem('vue-ui-dark-mode')
+  apolloClient.mutate({
+    mutation: DARK_MODE_SET,
+    variables: {
+      enabled: raw === 'true'
+    }
+  })
 }
 
 /* Connected state */

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,12 @@ export default {`
`22`	`22`	`darkMode: enabled`
`23`	`23`	`}`
`24`	`24`	`cache.writeData({ data })`
	`25`	`+ const el = document.getElementsByTagName('html')[0]`
	`26`	`+ if (enabled) {`
	`27`	`+ el.classList.add('vue-ui-dark-mode')`
	`28`	`+ } else {`
	`29`	`+ el.classList.remove('vue-ui-dark-mode')`
	`30`	`+ }`
`25`	`31`	`return null`
`26`	`32`	`}`
`27`	`33`	`}`