feat: add theme selector

VincentHardouin · May 3, 2024 · 474b69a · 474b69a
1 parent 18f335a
commit 474b69a
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 7 deletions.
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -1,10 +1,20 @@
 <script setup>
+import { ref } from 'vue';
+import { getCurrentTheme, setTheme } from '../handle-theme.js';
+import ThemeIcon from './ThemeIcon.vue';
 
+const currentTheme = ref(getCurrentTheme());
+
+function changeTheme(event) {
+  const theme = event.target.value;
+  currentTheme.value = theme;
+  setTheme(theme);
+}
 </script>
 
 <template>
   <nav class="navbar navbar-expand-lg bg-body-tertiary">
-    <div class="container-fluid">
+    <div class="container container-fluid">
       <RouterLink class="navbar-brand" to="/">
         Métro Travel
       </RouterLink>
@@ -44,6 +54,38 @@
               À propos
             </button>
           </li>
+          <li class="nav-item dropdown">
+            <button
+              id="themeDropdown"
+              class="nav-link dropdown-toggle"
+              role="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <ThemeIcon :icon="currentTheme" />
+              Theme
+            </button>
+            <ul class="dropdown-menu" aria-labelledby="themeDropdown">
+              <li>
+                <button class="dropdown-item" type="button" value="auto" @click="changeTheme">
+                  <ThemeIcon icon="auto" />
+                  OS Default
+                </button>
+              </li>
+              <li>
+                <button class="dropdown-item" type="button" value="dark" @click="changeTheme">
+                  <ThemeIcon icon="dark" />
+                  Dark
+                </button>
+              </li>
+              <li>
+                <button class="dropdown-item" type="button" value="light" @click="changeTheme">
+                  <ThemeIcon icon="light" />
+                  Light
+                </button>
+              </li>
+            </ul>
+          </li>
         </ul>
       </div>
     </div>

diff --git a/src/components/ThemeIcon.vue b/src/components/ThemeIcon.vue
@@ -0,0 +1,35 @@
+<script setup>
+defineProps(['icon']);
+</script>
+
+<template>
+  <svg
+    v-if="icon === 'auto'"
+    xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+    class="bi bi-circle-half" viewBox="0 0 16 16"
+  >
+    <path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16" />
+  </svg>
+  <svg
+    v-if="icon === 'dark'"
+    xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+    class="bi bi-moon-fill" viewBox="0 0 16 16"
+  >
+    <path
+      d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"
+    />
+  </svg>
+  <svg
+    v-if="icon === 'light'"
+    xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+    class="bi bi-brightness-high-fill" viewBox="0 0 16 16"
+  >
+    <path
+      d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"
+    />
+  </svg>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/handle-theme.js b/src/handle-theme.js
@@ -2,12 +2,18 @@ const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)');
 
 darkModeMedia.addEventListener('change', setTheme);
 
-function setTheme() {
-  const theme = darkModeMedia.matches ? 'dark' : 'light';
-  document.documentElement.setAttribute('data-theme', theme);
-  document.documentElement.setAttribute('data-bs-theme', theme);
+export function setTheme(theme) {
+  const realTheme = theme === 'auto' ? (darkModeMedia.matches ? 'dark' : 'light') : theme;
+  document.documentElement.setAttribute('data-theme', realTheme);
+  document.documentElement.setAttribute('data-bs-theme', realTheme);
+  localStorage.setItem('theme', theme);
 }
 
 export function initTheme() {
-  setTheme();
+  const theme = localStorage.getItem('theme') || 'auto';
+  setTheme(theme);
+}
+
+export function getCurrentTheme() {
+  return localStorage.getItem('theme') || 'light';
 }
diff --git a/src/map.js b/src/map.js
@@ -20,7 +20,7 @@ class ParisMap {
     this.#arrondissements = arrondissements;
     this.#stations = stations;
     this.#lines = lines;
-    this.#svg = d3.select('svg');
+    this.#svg = d3.select('svg#carte');
     this.#remove();
     this.#g = this.#svg.append('g');
     this.#arrondissementsNode = this.#g.append('g');