From eded04a93dd306188ba7612b29ec76c38957edfb Mon Sep 17 00:00:00 2001
From: EGOIST <0x142857@gmail.com>
Date: Mon, 10 Jun 2019 15:54:29 +0800
Subject: [PATCH] feat: auto detect color preference (#238)

* auto detect color preference

* tweaks

* enable detectSystemDarkTheme
---
 .../dark-theme-toggler/DarkThemeToggler.vue   | 24 +++++++++----------
 src/store.js                                  | 16 ++++++++++++-
 website/docs/options.md                       |  7 ++++++
 website/docs/zh/options.md                    |  7 ++++++
 website/index.js                              |  1 +
 5 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/plugins/dark-theme-toggler/DarkThemeToggler.vue b/src/plugins/dark-theme-toggler/DarkThemeToggler.vue
index c1f153e6..b9023df0 100644
--- a/src/plugins/dark-theme-toggler/DarkThemeToggler.vue
+++ b/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')
     }
   }
 }
diff --git a/src/store.js b/src/store.js
index efc22bf8..516686aa 100644
--- a/src/store.js
+++ b/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
     },
 
diff --git a/website/docs/options.md b/website/docs/options.md
index dccabbfe..828c0d35 100644
--- a/website/docs/options.md
+++ b/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`
diff --git a/website/docs/zh/options.md b/website/docs/zh/options.md
index fb35a2ad..dea57a30 100644
--- a/website/docs/zh/options.md
+++ b/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`
diff --git a/website/index.js b/website/index.js
index 99a4cd5f..952df8cd 100644
--- a/website/index.js
+++ b/website/index.js
@@ -48,6 +48,7 @@ new Docute({
   router: {
     mode: 'history'
   },
+  detectSystemDarkTheme: true,
   darkThemeToggler: true,
   sourcePath: '/',
   componentMixins: [