feat: auto detect color preference (#238)

* auto detect color preference

* tweaks

* enable detectSystemDarkTheme

Author: egoist

src/plugins/dark-theme-toggler/DarkThemeToggler.vue

@@ -35,18 +35,22 @@
 <script>
 export default {
   data() {
+    const themeStore = localStorage.getItem('docute:theme')
+    const dark =
+      'dark' in this.$route.query
+        ? true
+        : themeStore === 'dark'
+        ? true
+        : themeStore === 'default'
+        ? false
+        : this.$store.getters.config.theme === 'dark'
     return {
-      dark:
-        localStorage.getItem('docute:theme') === 'dark' ||
-        'dark' in this.$route.query ||
-        this.$store.getters.config.theme === 'dark'
+      dark
     }
   },
 
   created() {
-    if (this.dark) {
-      this.$store.commit('SET_THEME', 'dark')
-    }
+    this.$store.commit('SET_THEME', this.dark ? 'dark' : 'default')
   },
 
   methods: {
@@ -57,11 +61,7 @@ export default {
         'SET_THEME',
         this.dark ? 'dark' : prevTheme === 'dark' ? 'default' : prevTheme
       )
-      if (this.dark) {
-        localStorage.setItem('docute:theme', 'dark')
-      } else {
-        localStorage.removeItem('docute:theme')
-      }
+      localStorage.setItem('docute:theme', this.dark ? 'dark' : 'default')
     }
   }
 }

src/store.js

@@ -15,6 +15,20 @@ Vue.use(Vuex)
 
 const initialState = inBrowser && window[INITIAL_STATE_NAME]
 
+const getDefaultTheme = (store, {theme, detectSystemDarkTheme}) => {
+  if (!inBrowser || !detectSystemDarkTheme) {
+    return theme || 'default'
+  }
+
+  const mq = window.matchMedia('(prefers-color-scheme: dark)')
+
+  mq.addListener(() => {
+    store.commit('SET_THEME', mq.matches ? 'dark' : 'default')
+  })
+
+  return theme || (mq.matches ? 'dark' : 'default')
+}
+
 const store = new Vuex.Store({
   state: {
     originalConfig: {},
@@ -36,7 +50,7 @@ const store = new Vuex.Store({
       if (config.centerContent) {
         config.layout = 'narrow'
       }
-      config.theme = config.theme || 'default'
+      config.theme = getDefaultTheme(store, config)
       state.originalConfig = config
     },
 

website/docs/options.md

@@ -155,6 +155,13 @@ The text for *edit link*.
 
 Site theme.
 
+## detectSystemDarkTheme
+
+- Type: `boolean`
+- Default: `undefined`
+
+In recent versions of macOS (Mojave) and Windows 10, users have been able to enable a system level dark mode. Set this option to `true` so that Docute will use the dark theme by default if your system has it enabled.
+
 ## darkThemeToggler
 
 - Type: `boolean`

website/docs/zh/options.md

@@ -155,6 +155,13 @@ https://github.com/USER/REPO/blob/master/docs
 
 网站主题。
 
+## detectSystemDarkTheme
+
+- Type: `boolean`
+- Default: `undefined`
+
+In recent versions of macOS (Mojave) and Windows 10, users have been able to enable a system level dark mode. Set this option to `true` so that Docute will use the dark theme by default if your system has it enabled.
+
 ## darkThemeToggler
 
 - Type: `boolean`

website/index.js

@@ -48,6 +48,7 @@ new Docute({
   router: {
     mode: 'history'
   },
+  detectSystemDarkTheme: true,
   darkThemeToggler: true,
   sourcePath: '/',
   componentMixins: [