feat: auto detect color preference (#238)

* auto detect color preference

* tweaks

* enable detectSystemDarkTheme

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: [