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>

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>

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>