From 0f617504c43eb57e4b22fae266bff9c520b6c227 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Mon, 1 Dec 2025 19:49:06 +0100
Subject: [PATCH] Fix Grafana iframe not updating on theme change

Make iframe src reactive by appending theme query parameter based on
current dark/light mode. The Grafana dashboard now correctly switches
themes when toggling the app's theme.

Fixes #8
---
 frontend/src/components/BuildServerStats.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BuildServerStats.vue b/frontend/src/components/BuildServerStats.vue
index 16f0798..e36763c 100644
--- a/frontend/src/components/BuildServerStats.vue
+++ b/frontend/src/components/BuildServerStats.vue
@@ -11,7 +11,7 @@
         class="stats-iframe"
         loading="lazy"
         title="Buildserver statistics dashboard"
-        src="https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1" />
+        :src="iframeSrc" />
     </div>
   </section>
 </template>
@@ -19,15 +19,23 @@
 <script lang="ts" setup>
 import { useDisplay } from 'vuetify'
 import { computed } from 'vue'
+import { useTheme } from '@/composables/useTheme'
 
 const { width } = useDisplay()
+const { isDark } = useTheme()
 
 const GRAPH_HEIGHT = 335
 const NUMBER_OF_GRAPHS = 4
+const GRAFANA_BASE_URL =
+  'https://stats.itsh.dev/public-dashboards/0fb04abb0c5e4b7390cf26a98e6dead1'
 
 const iframeHeight = computed(() =>
   width.value <= 800 ? `${NUMBER_OF_GRAPHS * GRAPH_HEIGHT}px` : '420px'
 )
+
+const iframeSrc = computed(
+  () => `${GRAFANA_BASE_URL}?theme=${isDark.value ? 'dark' : 'light'}`
+)
 </script>
 
 <style scoped>