✨ Add theme support

src/App.vue

@@ -4,8 +4,17 @@ import TitleBar from "./components/titlebar-element.vue";
 import BottomNavbar from "./components/bottom-navbar.vue";
 import DateSelector from "./components/date-selector.vue";
 import LoadingElement from "./components/loading-element.vue";
-import { loading } from "./store";
-import { computed } from "vue";
+import { loading, theme } from "./store";
+import { computed, ref } from "vue";
+
+const autoThemes = { true: "dark", false: "light" };
+const autoTheme = ref("dark");
+const colorSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
+autoTheme.value = autoThemes[colorSchemeMedia.matches];
+colorSchemeMedia.addEventListener(
+  "change",
+  (e) => (autoTheme.value = autoThemes[e.matches])
+);
 
 const route = useRoute();
 const routeName = computed(() => route.name);
@@ -17,7 +26,10 @@ const isDataView = computed(() => {
 </script>
 
 <template>
-  <div class="app">
+  <div
+    class="app"
+    :class="theme == 'auto' ? `theme-${autoTheme}` : `theme-${theme}`"
+  >
     <TitleBar />
     <DateSelector v-show="isDataView" />
     <div class="center">
@@ -32,6 +44,7 @@ const isDataView = computed(() => {
 
 <style>
 @import "./assets/base.css";
+@import "./assets/themes.css";
 
 html,
 body {
@@ -42,14 +55,14 @@ body {
   margin: 0;
   padding: 0;
   color-scheme: dark;
-  color: var(--text-color);
-  background-color: var(--bg-color);
-  font-family: var(--font-family);
 }
 
 .app {
   display: grid;
   grid-template-rows: auto auto 1fr;
+  color: var(--text-color);
+  background-color: var(--bg-color);
+  font-family: var(--font-family);
 }
 
 .center {