92 dark mode switch

frontend/src/components/DarkModeSwitcher.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { usePrimeVue } from 'primevue/config';
+
+const PrimeVue = usePrimeVue();
+
+const isDark = ref(true);
+const darkTheme = ref('lara-dark-blue'),
+  lightTheme = ref('lara-light-blue');
+
+function toggleTheme() {
+  isDark.value = !isDark.value;
+  setTheme(isDark.value);
+}
+
+function setTheme(shouldBeDark: boolean) {
+  isDark.value = shouldBeDark;
+  const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
+    oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
+  PrimeVue.changeTheme(oldTheme, newTheme, 'theme-link', () => {});
+}
+
+// set theme matching browser preference
+setTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+   setTheme(e.matches); 
+});
+</script>
+
+<template>
+
+<Button
+  size="small"
+  class="p-button-rounded w-full md:w-auto"
+  id="dark-mode-switcher"
+  style="margin-right: 1rem"
+  :severity="isDark ? 'warning' : 'info'"
+  @click="toggleTheme"
+  >
+  <i class="pi pi-sun" v-if="isDark"></i>
+  <i class="pi pi-moon" v-else></i>
+</Button>
+
+</template>

frontend/src/components/MenuBar.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import LocaleSwitcher from "./LocaleSwitcher.vue";
+import DarkModeSwitcher from "./DarkModeSwitcher.vue"
 const { t } = useI18n({ useScope: "global" });
 
 const items = computed(() => [
@@ -69,8 +70,11 @@ const items = computed(() => [
         />
       </router-link>
     </template>
-    <template #end>
-      <LocaleSwitcher></LocaleSwitcher>
+    <template #end class="align-items-stretch">
+      <div class="flex align-items-stretch justify-content-center">
+        <DarkModeSwitcher></DarkModeSwitcher>
+        <LocaleSwitcher></LocaleSwitcher>
+      </div>
     </template>
   </Menubar>
 </template>

frontend/src/main.ts

@@ -12,7 +12,6 @@ import Card from "primevue/card";
 import DataView from "primevue/dataview";
 import Dialog from "primevue/dialog";
 import ToggleButton from "primevue/togglebutton";
-import "primevue/resources/themes/tailwind-light/theme.css";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
 import router from "./router";
@@ -67,4 +66,5 @@ app.component("Column", Column);
 app.component("DynamicDialog", DynamicDialog);
 app.component("ProgressSpinner", ProgressSpinner);
 app.component("Checkbox", Checkbox);
+
 app.mount("#app");