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>