From 39fafe01f489ac63b6bf59f3e3bdbaaf31516638 Mon Sep 17 00:00:00 2001
From: David Whittaker <dwhittaker@netflix.com>
Date: Mon, 27 Nov 2023 09:23:11 -0800
Subject: [PATCH] Dark mode not persisting through reloads

---
 .../static/dispatch/src/components/AppToolbar.vue  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/dispatch/static/dispatch/src/components/AppToolbar.vue b/src/dispatch/static/dispatch/src/components/AppToolbar.vue
index 169d7183b362..25684be6cc2c 100644
--- a/src/dispatch/static/dispatch/src/components/AppToolbar.vue
+++ b/src/dispatch/static/dispatch/src/components/AppToolbar.vue
@@ -24,13 +24,9 @@
     <v-spacer />
     <v-toolbar-items>
       <v-btn icon variant="text" @click="toggleDarkTheme">
-        <v-icon
-          :icon="
-            $vuetify.theme.current.dark ? 'mdi-white-balance-sunny' : 'mdi-moon-waxing-crescent'
-          "
-        />
+        <v-icon :icon="dark_theme ? 'mdi-white-balance-sunny' : 'mdi-moon-waxing-crescent'" />
         <v-tooltip activator="parent" location="bottom">
-          Dark Mode {{ $vuetify.theme.current.dark ? "Off" : "On" }}
+          Dark Mode {{ dark_theme ? "Off" : "On" }}
         </v-tooltip>
       </v-btn>
       <v-btn icon variant="text">
@@ -158,6 +154,7 @@ export default {
   data: () => ({
     organizations: [],
     query: "",
+    dark_theme: false,
   }),
   setup() {
     return { formatHash }
@@ -205,6 +202,7 @@ export default {
     toggleDarkTheme() {
       this.$vuetify.theme.global.name = this.$vuetify.theme.global.current.dark ? "light" : "dark"
       localStorage.setItem("dark_theme", this.$vuetify.theme.global.current.dark.toString())
+      this.dark_theme = !this.dark_theme
     },
     switchOrganizations(slug) {
       this.$router.push({ params: { organization: slug } }).then(() => {
@@ -233,8 +231,12 @@ export default {
     let theme = localStorage.getItem("dark_theme")
     if (theme) {
       if (theme === "true") {
+        this.dark_theme = true
+        if (this.$vuetify.theme.global) this.$vuetify.theme.global.name = "dark"
         this.$vuetify.theme.dark = true
       } else {
+        this.dark_theme = false
+        if (this.$vuetify.theme.global) this.$vuetify.theme.global.name = "light"
         this.$vuetify.theme.dark = false
       }
     }