perf($Theme): abstract codes of color scheme

Author: johnnymillergh

src/main.ts

@@ -6,18 +6,15 @@ import vuetify from './plugins/vuetify'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import '@mdi/font/css/materialdesignicons.css'
 import '@/directives/throttled-click'
-import { ColorSchemeUtil } from '@/utils/color-scheme-util'
+import { listenToColorScheme } from '@/plugins/adaptive-color-scheme'
 
 Vue.config.productionTip = false
 
-const vue = new Vue({
+const vueInstance = new Vue({
   router,
   store,
   vuetify,
   render: h => h(App)
 }).$mount('#app')
 
-const media = window.matchMedia('(prefers-color-scheme: dark)')
-media.addEventListener('change', () => {
-  vue.$vuetify.theme.dark = ColorSchemeUtil.isDarkMode()
-})
+listenToColorScheme(vueInstance)

src/plugins/adaptive-color-scheme/index.ts

@@ -0,0 +1,16 @@
+import { ColorSchemeUtil } from '@/utils/color-scheme-util'
+// eslint-disable-next-line no-unused-vars
+import Vue from 'vue'
+
+/**
+ * Listen to color scheme
+ * @param vueInstance Vue instance
+ * @author Johnny Miller (鍾俊), e-mail: [email protected]
+ * @date 12/31/19 7:43 AM
+ */
+export function listenToColorScheme (vueInstance: Vue): void {
+  const media = window.matchMedia('(prefers-color-scheme: dark)')
+  media.addEventListener('change', () => {
+    vueInstance.$vuetify.theme.dark = ColorSchemeUtil.isDarkMode()
+  })
+}