From 01f423dbcadf68515a71f62efa71c57a7e976c15 Mon Sep 17 00:00:00 2001
From: Vincent Hardouin <vincenthardouin@icloud.com>
Date: Fri, 3 May 2024 11:07:23 +0200
Subject: [PATCH] feat: add dark mode

---
 src/components/Navbar.vue |  2 +-
 src/handle-theme.js       | 13 +++++++++++++
 src/main.js               |  4 ++++
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/handle-theme.js

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index b087eeb..1138116 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <nav class="navbar navbar-expand-lg bg-body-tertiary">
     <div class="container-fluid">
       <RouterLink class="navbar-brand" to="/">
         Métro Travel
diff --git a/src/handle-theme.js b/src/handle-theme.js
new file mode 100644
index 0000000..8646a4b
--- /dev/null
+++ b/src/handle-theme.js
@@ -0,0 +1,13 @@
+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 initTheme() {
+  setTheme();
+}
diff --git a/src/main.js b/src/main.js
index ad6131b..54fb757 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,10 @@ import App from './App.vue';
 
 import { router } from './router';
 
+import { initTheme } from './handle-theme.js';
+
 const app = createApp(App);
 
 app.use(router).mount('#app');
+
+initTheme();