diff --git a/packages/@vue/cli-ui/src/components/StatusBar.vue b/packages/@vue/cli-ui/src/components/StatusBar.vue
index 01304972de..7df5c8f550 100644
--- 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
index 7b82625013..2fee55fe57 100644
--- 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
index 3645cefff2..4a6708d83a 100644
--- 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 */