HTWK/htwkalender-pwa
1
0
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git synced 2025-08-06 11:49:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

92 dark mode switch

Browse Source
This commit is contained in:
survellow
2023-12-04 23:13:17 +01:00
parent 8dfe8a4836
commit 3bc602f79f
8 changed files with 23895 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/htwk.svg" /> <link rel="icon" type="image/svg+xml" href="/htwk.svg" />
<link id="theme-link" rel="stylesheet" href="themes/lara-light-blue/theme.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTWKalender</title> <title>HTWKalender</title>
</head> </head>

5970
frontend/public/themes/bootstrap4-dark-blue/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

5970
frontend/public/themes/bootstrap4-light-blue/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

5951
frontend/public/themes/lara-dark-blue/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

5951
frontend/public/themes/lara-light-blue/theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

45
frontend/src/components/DarkModeSwitcher.vue Normal file
View File

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

8
frontend/src/components/MenuBar.vue
View File

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

2
frontend/src/main.ts
View File

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