feat(ui): forced theme via URL

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/StatusBar.vue

@@ -48,6 +48,7 @@
       </div>
 
       <div
+        v-if="enableDarkModeButton"
         class="section action dark-mode"
         v-tooltip="$t('components.status-bar.dark-mode')"
         @click="toggleDarkMode()"
@@ -87,6 +88,7 @@ import CONSOLE_LOG_ADDED from '../graphql/consoleLogAdded.gql'
 import DARK_MODE_SET from '../graphql/darkModeSet.gql'
 import PLUGIN_RESET_API from '../graphql/pluginResetApi.gql'
 import { resetApollo } from '../vue-apollo'
+import { getForcedTheme } from '../util/theme'
 
 let lastRoute
 
@@ -96,7 +98,8 @@ export default {
   data () {
     return {
       showLogs: false,
-      consoleLogLast: null
+      consoleLogLast: null,
+      enableDarkModeButton: getForcedTheme() == null
     }
   },
 
@@ -114,10 +117,6 @@ export default {
     }
   },
 
-  created () {
-    this.loadDarkMode()
-  },
-
   methods: {
     onProjectClick () {
       this.$emit('project')
@@ -159,11 +158,6 @@ export default {
       win.focus()
     },
 
-    loadDarkMode () {
-      const raw = localStorage.getItem('vue-ui-dark-mode')
-      this.applyDarkMode(raw === 'true')
-    },
-
     async applyDarkMode (enabled) {
       localStorage.setItem('vue-ui-dark-mode', enabled.toString())
       await this.$apollo.mutate({

packages/@vue/cli-ui/src/util/theme.js

@@ -0,0 +1,12 @@
+let forcedTheme = null
+
+{
+  const result = /\?theme=(\w+)/.exec(window.location.href)
+  if (result) forcedTheme = result[1]
+}
+
+console.log('forced theme', forcedTheme)
+
+export function getForcedTheme () {
+  return forcedTheme
+}

packages/@vue/cli-ui/src/vue-apollo.js

@@ -8,6 +8,7 @@ import clientStateResolvers from './state/resolvers'
 import CONNECTED_SET from './graphql/connectedSet.gql'
 import LOADING_CHANGE from './graphql/loadingChange.gql'
 import DARK_MODE_SET from './graphql/darkModeSet.gql'
+import { getForcedTheme } from './util/theme'
 
 // Install the vue plugin
 Vue.use(VueApollo)
@@ -68,13 +69,7 @@ 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'
-    }
-  })
+  loadDarkMode()
 }
 
 /* Connected state */
@@ -96,3 +91,23 @@ wsClient.on('reconnected', async () => {
 // Offline
 wsClient.on('disconnected', () => setConnected(false))
 wsClient.on('error', () => setConnected(false))
+
+/* Dark mode */
+
+function loadDarkMode () {
+  let enabled, forcedTheme
+  if ((forcedTheme = getForcedTheme())) {
+    enabled = forcedTheme === 'dark'
+  } else {
+    const raw = localStorage.getItem('vue-ui-dark-mode')
+    enabled = raw === 'true'
+  }
+  apolloClient.mutate({
+    mutation: DARK_MODE_SET,
+    variables: {
+      enabled
+    }
+  })
+}
+
+loadDarkMode()