htwkalender/frontend/src/components/DarkModeSwitcher.vue

<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>