HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2026-01-17 20:12:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix:#24 linted and formatted

Browse Source
This commit is contained in:
Elmar Kresse
2024-01-17 18:53:17 +01:00
parent f112c8c71c
commit c13cfc61fd
25 changed files with 4620 additions and 1890 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/DarkModeSwitcher.vue
View File

@@ -1,12 +1,12 @@
<script lang="ts" setup>
import { ref } from "vue";
import { usePrimeVue } from 'primevue/config';
import { usePrimeVue } from "primevue/config";
const PrimeVue = usePrimeVue();
const isDark = ref(true);
const darkTheme = ref('lara-dark-blue'),
lightTheme = ref('lara-light-blue');
const darkTheme = ref("lara-dark-blue"),
lightTheme = ref("lara-light-blue");
function toggleTheme() {
isDark.value = !isDark.value;
@@ -17,29 +17,32 @@ 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', () => {});
PrimeVue.changeTheme(oldTheme, newTheme, "theme-link", () => {});
}
// set theme matching browser preference
setTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
setTheme(
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches,
);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
setTheme(e.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"
<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>
<i v-if="isDark" class="pi pi-sun"></i>
<i v-else class="pi pi-moon"></i>
</Button>
</template>