Merge pull request 'add DarkMode with Button' (#51) from feature/dark-mode into main

Reviewed-on: #51
Reviewed-by: Jakob Scheid

src/App.vue

@@ -17,16 +17,23 @@ 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, watch } from 'vue';
+
+const isDark = ref(localStorage.getItem('theme') === 'dark');
+provide('isDark', isDark);
+watch(isDark, val => localStorage.setItem('theme', val ? 'dark' : 'light'));
 </script>
 
 <template>
-    <Navbar />
+    <div :class="{ dark: isDark }" class="app-wrapper">
+        <Navbar />
 
-    <div class="main-content">
-        <router-view />
+        <div class="main-content">
+            <router-view />
+        </div>
+
+        <Footer />
     </div>
-
-    <Footer />
 </template>
 
 <style scoped>
@@ -37,4 +44,9 @@ import Footer from './features/footer/components/Footer.vue';
     width: calc(100% - var(--main-content-padding-x) * 2);
     flex-grow: 1;
 }
+.app-wrapper {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
 </style>

src/features/nav/components/Navbar.vue

@@ -13,14 +13,25 @@ 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">
             <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>
 
@@ -48,4 +59,20 @@ limitations under the License.
 .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>

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);
 }