htwkalender-pwa/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
    id="dark-mode-switcher"
    size="small"
    class="p-button-rounded w-full md:w-auto"
    style="margin-right: 1rem"
    :severity="isDark ? 'warning' : 'info'"
    @click="toggleTheme"
  >
    <i v-if="isDark" class="pi pi-sun"></i>
    <i v-else class="pi pi-moon"></i>
  </Button>
</template>