fix: removing flash of theme using nuxt plugins

Author: technikhil314

components/navbar.vue

@@ -159,15 +159,7 @@ export default {
     }
   },
   mounted() {
-    const cookies = document.cookie.split(';')
-    const cookieMap = {}
-    cookies.forEach((element) => {
-      const [name, val] = element.split('=')
-      cookieMap[name] = val
-    })
-    if (
-      ((window.matchMedia('(prefers-color-scheme: dark)').matches && cookieMap.darkMode === undefined) || cookieMap.darkMode === 'true')
-    ) {
+    if (this.$isDarkMode) {
       this.toggleDarkMode(null, true)
     }
   },

helpers/isDarkModeCookie.ts

@@ -0,0 +1,16 @@
+export default function () {
+  const cookies = document.cookie.split(';')
+  const cookieMap: {
+    darkMode: string
+  } = {}
+  cookies.forEach((element) => {
+    const [name, val] = element.split('=')
+    if (name === 'darkMode') {
+      cookieMap[name] = val
+    }
+  })
+  return (
+    window.matchMedia('(prefers-color-scheme: dark)').matches &&
+    (cookieMap.darkMode === undefined || cookieMap.darkMode === 'true')
+  )
+}

nuxt.config.js

@@ -72,6 +72,7 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
+    '~/plugins/fart-remover.client.ts'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

plugins/fart-remover.client.ts

@@ -0,0 +1,5 @@
+import isDarkModeCookie from '~/helpers/isDarkModeCookie'
+
+export default function (context: any, inject: any) {
+  inject('isDarkMode', isDarkModeCookie())
+}