From 0b609598f05359002f8f706283a69b1bd115c315 Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Fri, 15 May 2026 10:09:56 +0200
Subject: [PATCH 1/7] style: add dark mode CSS varivale

---
 src/styles/variables/colors.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index 6f1e1aa..48dc034 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -59,4 +59,19 @@
 
     --dark-bg:              var(--black-l-2);
     --light-bg:             oklch(1 0 0);
+}
+.dark {
+    color-scheme: dark;
+    background-color: var(--dark-bg);
+    color: var(--white-d-1);
+
+    --light:     var(--black-l-8);
+    --light-d-1: var(--black-l-7);
+    --light-d-2: var(--black-l-6);
+    --light-d-3: var(--black-l-5);
+    --light-d-4: var(--black-l-4);
+    --light-d-5: var(--black-l-3);
+    --light-d-6: var(--black-l-2);
+    --light-d-7: var(--black-l-1);
+    --light-d-8: var(--black);
 }
\ No newline at end of file
-- 
2.39.5


From a0eaf36db39049b817775d2ee1ccf4494e71c5d0 Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Fri, 15 May 2026 10:12:23 +0200
Subject: [PATCH 2/7] add isDark state in App.vue

---
 src/App.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8cbcbe8..f1f07cb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,16 +17,21 @@ limitations under the License.
 <script setup>
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
+import { ref, provide } from 'vue';
+const isDark = ref(false);
+provide('isDark', isDark);
 </script>
 
 <template>
-    <Navbar />
+    <div :class="{ dark: isDark }">
+        <Navbar />
 
-    <div class="main-content">
-        <router-view />
+        <div class="main-content">
+            <router-view />
+        </div>
+
+        <Footer />
     </div>
-
-    <Footer />
 </template>
 
 <style scoped>
-- 
2.39.5


From d24e11b466e451f3e356ee3f9c6422808c8ec884 Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Fri, 15 May 2026 10:13:36 +0200
Subject: [PATCH 3/7] feat: inject isDark in Navbar

---
 src/features/nav/components/Navbar.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index 8ecdd2a..ed650a4 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -13,7 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-
+<script setup>
+import { inject } from 'vue';
+const isDark = inject('isDark');
+</script>
 <template>
     <nav class="global-nav">
         <RouterLink to="/" class="link button link">
-- 
2.39.5


From 81cebb4636c47157efbf7d6d022a119675c751ea Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Fri, 15 May 2026 10:14:05 +0200
Subject: [PATCH 4/7] feat: add dark mode toggle button to Navbar

---
 src/features/nav/components/Navbar.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index ed650a4..6716c17 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -22,8 +22,16 @@ const isDark = inject('isDark');
         <RouterLink to="/" class="link button link">
             <span id="logo">Seekra</span>
         </RouterLink>
-        <ul class="right-links">
-        </ul>
+    <ul class="right-links">
+        <li>
+            <button class="dark-mode-toggle"
+                @click="isDark = !isDark"
+                :aria-label="isDark ? 'Light mode' : 'Dark mode'">
+                <span v-if="isDark">☀️</span>
+                <span v-else>🌙</span>
+            </button>
+        </li>
+    </ul>
     </nav>
 </template>
 
-- 
2.39.5


From 2af6c74696c0a14951d505425c0a2c1982a93c5b Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Fri, 15 May 2026 10:14:39 +0200
Subject: [PATCH 5/7] style: add dark mode toggle button styles

---
 src/features/nav/components/Navbar.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index 6716c17..9033eb7 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -59,4 +59,20 @@ const isDark = inject('isDark');
 .global-nav .right-links a:hover{
     text-decoration: underline;
 }
+.dark-mode-toggle {
+    background: none;
+    border: 1.5px solid var(--light-d-3);
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.dark-mode-toggle:hover {
+    background: var(--light-d-2);
+}
 </style>
\ No newline at end of file
-- 
2.39.5


From 67adb1793664975cfd80de50b51bfe2bd94007fa Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Fri, 15 May 2026 10:19:44 +0200
Subject: [PATCH 6/7] feat: persist dark mode preference in localStorage

---
 src/App.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f1f07cb..daa0c52 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,9 +17,11 @@ limitations under the License.
 <script setup>
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
-import { ref, provide } from 'vue';
-const isDark = ref(false);
+import { ref, provide, watch } from 'vue';
+
+const isDark = ref(localStorage.getItem('theme') === 'dark');
 provide('isDark', isDark);
+watch(isDark, val => localStorage.setItem('theme', val ? 'dark' : 'light'));
 </script>
 
 <template>
-- 
2.39.5


From 488186d795deb6abc19c44dda13ac0b4f72eb72e Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Fri, 15 May 2026 10:21:30 +0200
Subject: [PATCH 7/7] fix: restore full-height flex layout after dark mode
 wrapper

---
 src/App.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index daa0c52..b1f8dc2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,7 +25,7 @@ watch(isDark, val => localStorage.setItem('theme', val ? 'dark' : 'light'));
 </script>
 
 <template>
-    <div :class="{ dark: isDark }">
+    <div :class="{ dark: isDark }" class="app-wrapper">
         <Navbar />
 
         <div class="main-content">
@@ -44,4 +44,9 @@ watch(isDark, val => localStorage.setItem('theme', val ? 'dark' : 'light'));
     width: calc(100% - var(--main-content-padding-x) * 2);
     flex-grow: 1;
 }
+.app-wrapper {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
 </style>
\ No newline at end of file
-- 
2.39.5