From 170f188435f0b04360c1ccb8d34506786729454a Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Sun, 17 May 2026 15:24:53 +0200
Subject: [PATCH] Move color theme toggle button into a separate component

---
 src/App.vue                                   |  1 -
 .../components/DarkModeToggleButton.vue       | 32 +++++++++++++++++++
 src/features/nav/components/Navbar.vue        |  9 ++----
 3 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/features/colorTheme/components/DarkModeToggleButton.vue

diff --git a/src/App.vue b/src/App.vue
index b1f8dc2..ee20294 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,7 +21,6 @@ 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>
diff --git a/src/features/colorTheme/components/DarkModeToggleButton.vue b/src/features/colorTheme/components/DarkModeToggleButton.vue
new file mode 100644
index 0000000..e94b60a
--- /dev/null
+++ b/src/features/colorTheme/components/DarkModeToggleButton.vue
@@ -0,0 +1,32 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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, watch } from 'vue';
+
+const isDark = inject('isDark');
+watch(isDark, val => localStorage.setItem('theme', val ? 'dark' : 'light'));
+</script>
+
+<template>
+    <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>
+</template>
\ No newline at end of file
diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index f8b3466..eb87691 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -15,6 +15,8 @@ limitations under the License.
 -->
 
 <script setup>
+import DarkModeToggleButton from '@/features/colorTheme/components/DarkModeToggleButton.vue';
+
 import { inject } from 'vue';
 import logo from '@/assets/logo.svg';
 
@@ -27,12 +29,7 @@ const isDark = inject('isDark');
         </RouterLink>
     <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>
+            <DarkModeToggleButton />
         </li>
     </ul>
     </nav>