feat: add dark mode

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

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

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