From 0e1d778d3aaa97e23fec60dfec9aa489bf470a1e Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sun, 4 Dec 2022 13:30:02 -0600
Subject: [PATCH] fix: delay dark mode loading to bypass vuetify bug (#1877)

---
 frontend/plugins/dark-mode.client.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/plugins/dark-mode.client.ts b/frontend/plugins/dark-mode.client.ts
index 8920704d47a7..0b79ee49a703 100644
--- a/frontend/plugins/dark-mode.client.ts
+++ b/frontend/plugins/dark-mode.client.ts
@@ -4,7 +4,10 @@ import { useDark } from "@vueuse/core";
 const darkModePlugin: Plugin = ({ $vuetify }, _) => {
   const isDark = useDark();
 
-  $vuetify.theme.dark = isDark.value;
+  // Vuetify metadata is bugged and doesn't render dark mode fully when called immediately
+  // Adding a 0.5 millisecond delay fixes this problem
+  // https://stackoverflow.com/questions/69399797/vuetify-darkmode-colors-wrong-after-page-reload
+  setTimeout( () => { $vuetify.theme.dark = isDark.value; }, 0.5);
 };
 
 export default darkModePlugin;