Fix footer + Add Posts preview + fix header + about + blog + index page

build/color-mode/plugin.client.js

@@ -0,0 +1,106 @@
+import Vue from 'vue'
+import colorSchemeComponent from './color-scheme'
+
+Vue.component('ColorScheme', colorSchemeComponent)
+
+const storageKey = 'nuxt-color-mode'
+const colorMode = window['__NUXT_COLOR_MODE__']
+const getForcedColorMode = route => route.matched[0] && route.matched[0].components.default.options.colorMode
+
+export default function (ctx, inject) {
+  let data = ctx.nuxtState.colorMode
+  // For SPA mode or fallback
+  if (!data) {
+    data = {
+      preference: colorMode.preference,
+      value: colorMode.value,
+      unknown: false
+    }
+    const pageColorMode = getForcedColorMode(ctx.route)
+    if (pageColorMode) {
+      data.value = pageColorMode
+      data.forced = true
+      colorMode.addClass(pageColorMode)
+    }
+  }
+  // Get current page component
+  const $colorMode = new Vue({
+    data,
+    watch: {
+      preference (preference) {
+        if (this.forced) {
+          return
+        }
+        if (preference === 'system') {
+          this.value = colorMode.getColorScheme()
+          this._watchMedia()
+        } else {
+          this.value = preference
+        }
+
+        this._storePreference(preference)
+      },
+      value (newValue, oldValue) {
+        colorMode.removeClass(oldValue)
+        colorMode.addClass(newValue)
+      }
+    },
+    created () {
+      if (this.preference === 'system') {
+        this._watchMedia()
+      }
+      if (window.localStorage) {
+        this._watchStorageChange()
+      }
+    },
+    methods: {
+      _watchMedia () {
+        if (this._darkWatcher || !window.matchMedia) {
+          return
+        }
+
+        this._darkWatcher = window.matchMedia('(prefers-color-scheme: dark)')
+        this._darkWatcher.addListener((e) => {
+          if (!this.forced && this.preference === 'system') {
+            this.value = colorMode.getColorScheme()
+          }
+        })
+      },
+      _watchStorageChange () {
+        window.addEventListener('storage', (e) => {
+          if (e.key === storageKey) {
+            this.preference = e.newValue
+          }
+        })
+      },
+      _storePreference (preference) {
+        // Local storage to sync with other tabs
+        window.localStorage.setItem(storageKey, preference)
+      }
+    }
+  })
+
+  window.onNuxtReady(() => {
+    if ($colorMode.unknown) {
+      $colorMode.preference = colorMode.preference
+      $colorMode.value = colorMode.value
+      $colorMode.unknown = false
+    }
+    ctx.app.router.beforeEach((route, from, next) => {
+      const forcedColorMode = getForcedColorMode(route)
+
+      if (forcedColorMode && forcedColorMode !== 'system') {
+        $colorMode.value = forcedColorMode
+        $colorMode.forced = true
+      } else {
+        if (forcedColorMode === 'system') {
+          console.warn('You cannot force the colorMode to system at the page level.')
+        }
+        $colorMode.forced = false
+        $colorMode.value = $colorMode.preference === 'system' ? colorMode.getColorScheme() : $colorMode.preference
+      }
+      next()
+    })
+  })
+  inject('colorMode', $colorMode)
+}