From 31437f77e8fecd05ca90c5f48ad2695059ebce80 Mon Sep 17 00:00:00 2001
From: ltuffery <123221865+ltuffery@users.noreply.github.com>
Date: Thu, 15 May 2025 15:41:51 +0200
Subject: [PATCH 1/2] feat: save changed theme

---
 frontend/src/App.vue                      |  7 +++++++
 frontend/src/components/ThemeSwitcher.vue | 19 +++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 24aab3e..24c3a91 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -32,9 +32,16 @@ window.addEventListener('logout', () => {
 
 onMounted(async () => {
   const mediaQuery = window.matchMedia(breakPointScreen)
+
   mediaQuery.addEventListener('change', e => {
     sizeScreen.value = e
   })
+
+  const theme = localStorage.getItem("theme")
+
+  if (theme !== null) {
+    document.querySelector("html").setAttribute("data-theme", theme);
+  }
 })
 
 onUnmounted(() => {
diff --git a/frontend/src/components/ThemeSwitcher.vue b/frontend/src/components/ThemeSwitcher.vue
index acdec5a..9212059 100644
--- a/frontend/src/components/ThemeSwitcher.vue
+++ b/frontend/src/components/ThemeSwitcher.vue
@@ -1,3 +1,13 @@
+<script setup>
+import { ref, watch } from 'vue'
+
+const picked = ref(localStorage.getItem("theme") || 'default')
+
+watch(picked, (newTheme) => {
+  localStorage.setItem("theme", newTheme)
+})
+</script>
+
 <template>
   <div class="dropdown dropdown-right dropdown-end">
     <div
@@ -40,6 +50,7 @@
           class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
           aria-label="Default"
           value="default"
+          v-model="picked"
         />
       </li>
       <li>
@@ -49,6 +60,7 @@
           class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
           aria-label="Dark"
           value="dark"
+          v-model="picked"
         />
       </li>
       <li>
@@ -58,6 +70,7 @@
           class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
           aria-label="Cyberpunk"
           value="cyberpunk"
+          v-model="picked"
         />
       </li>
       <li>
@@ -67,6 +80,7 @@
           class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
           aria-label="Sunset"
           value="sunset"
+          v-model="picked"
         />
       </li>
       <li>
@@ -76,6 +90,7 @@
           class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
           aria-label="Aqua"
           value="aqua"
+          v-model="picked"
         />
       </li>
       <li>
@@ -85,6 +100,7 @@
           class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
           aria-label="Romance Light"
           value="romance-light"
+          v-model="picked"
         />
       </li>
       <li>
@@ -94,10 +110,9 @@
           class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
           aria-label="Romance Dark"
           value="romance-dark"
+          v-model="picked"
         />
       </li>
     </ul>
   </div>
 </template>
-<script setup lang="ts">
-</script>

From 5c9255e3e89acfefeaa6f28b2850edb320621924 Mon Sep 17 00:00:00 2001
From: ltuffery <123221865+ltuffery@users.noreply.github.com>
Date: Thu, 15 May 2025 15:43:14 +0200
Subject: [PATCH 2/2] format files

---
 frontend/src/App.vue                      | 4 ++--
 frontend/src/components/ThemeSwitcher.vue | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 24c3a91..d84d180 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -37,10 +37,10 @@ onMounted(async () => {
     sizeScreen.value = e
   })
 
-  const theme = localStorage.getItem("theme")
+  const theme = localStorage.getItem('theme')
 
   if (theme !== null) {
-    document.querySelector("html").setAttribute("data-theme", theme);
+    document.querySelector('html').setAttribute('data-theme', theme)
   }
 })
 
diff --git a/frontend/src/components/ThemeSwitcher.vue b/frontend/src/components/ThemeSwitcher.vue
index 9212059..8a3aa40 100644
--- a/frontend/src/components/ThemeSwitcher.vue
+++ b/frontend/src/components/ThemeSwitcher.vue
@@ -1,10 +1,10 @@
 <script setup>
 import { ref, watch } from 'vue'
 
-const picked = ref(localStorage.getItem("theme") || 'default')
+const picked = ref(localStorage.getItem('theme') || 'default')
 
-watch(picked, (newTheme) => {
-  localStorage.setItem("theme", newTheme)
+watch(picked, newTheme => {
+  localStorage.setItem('theme', newTheme)
 })
 </script>