fix(VueDatepicker darkmode): updates the dark mode property of the vueDatePicker if the theme is switched to light or dark mode

This commit is contained in:
SimonGschnell
2025-07-10 12:10:39 +02:00
parent 6f3759d95d
commit dba435dafb
2 changed files with 9 additions and 6 deletions
@@ -184,12 +184,11 @@ export const Raumsuche = {
}
}
},
watch: {
},
computed: {
isDarkMode(){
return this.$theme.theme_name.value == 'dark';
}
},
created() {
@@ -203,6 +202,7 @@ export const Raumsuche = {
<div class="row">
<div class="col-12 col-lg-2">
<VueDatePicker
:dark="isDarkMode"
v-model="datum"
:clearable="false"
date-picker
@@ -215,6 +215,7 @@ export const Raumsuche = {
</div>
<div class="col-12 col-lg-1">
<VueDatePicker
:dark="isDarkMode"
v-model="von"
:clearable="false"
time-picker
@@ -227,6 +228,7 @@ export const Raumsuche = {
</div>
<div class="col-12 col-lg-1">
<VueDatePicker
:dark="isDarkMode"
v-model="bis"
:clearable="false"
time-picker
+3 -2
View File
@@ -1,4 +1,4 @@
const theme_name= FHC_JS_DATA_STORAGE_OBJECT.theme.name;
let theme_name = Vue.ref(FHC_JS_DATA_STORAGE_OBJECT.theme.name);
const theme_modes = FHC_JS_DATA_STORAGE_OBJECT.theme.modes;
const toggleTheme = (theme)=>{
@@ -7,6 +7,7 @@ const toggleTheme = (theme)=>{
for (const theme of theme_modes) {
document.documentElement.classList.remove(theme);
}
theme_name.value = theme;
document.documentElement.classList.add(theme);
document.body.setAttribute("data-bs-theme", theme);
@@ -40,7 +41,7 @@ const initializeTheme = ()=>{
export default {
install: (app,options)=>{
document.documentElement.classList.add(theme_name);
document.documentElement.classList.add(theme_name.value);
initializeTheme();