tweak(Tinebase/UI): Modals made grey in darkmode for better contrast

tine-groupware · Nov 28, 2024 · 0166c43 · 0166c43
1 parent 2a75802
commit 0166c43
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/tine20/Tinebase/css/darkmode.less b/tine20/Tinebase/css/darkmode.less
@@ -42,10 +42,17 @@ body.dark-mode {
 
   .dark-reverse {
     filter: invert(1) hue-rotate(180deg);
+
+    .btn-close {
+      filter: invert(1);
+      color: white !important;
+    }
+
   }
 
-  .no-dark-invert {
-    filter: initial !important;
+  .modal-content {
+    color:white;
+    background-color: rgb(33, 37, 41);
   }
 
   .x-color-palette a {

diff --git a/tine20/Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue b/tine20/Tinebase/js/ux/vue/PersonaContainer/PersonaContainer.vue
@@ -8,7 +8,7 @@
  */
 -->
 <template>
-  <div v-html="rawSvg" class="dark-reverse vue-msg-box-svg-container" :style="`--skin-color: ${skinColor}`"></div>
+  <div v-html="rawSvg" class="vue-msg-box-svg-container" :style="`--skin-color: ${skinColor}`"></div>
 </template>
 
 <script setup>

diff --git a/tine20/Tinebase/js/widgets/dialog/vue/ModalDialog/GenericDialog.vue b/tine20/Tinebase/js/widgets/dialog/vue/ModalDialog/GenericDialog.vue
@@ -12,15 +12,16 @@
   <BModal v-model="showModal"
           :title="modalProps.title"
           :title-class="'title'"
-          :modal-class="'bootstrap-scope dark-reverse'"
+          :modal-class="'bootstrap-scope'"
           :hide-header-close="!modalProps.closable"
           :hide-footer="!modalProps.buttons"
           :centered="true"
           :no-fade="true"
           :lazy="true"
           :noCloseOnBackdrop="true"
+          v-bind:data-bs-theme="darkmode"
           :noCloseOnEsc="true"
-          class="no-dark-invert"
+          class="dark-reverse"
           @close="handleModalClose" :style="{'z-index': modalProps.zIndex}"
           :id="modalProps.injectKey"
   >
@@ -85,6 +86,8 @@ watch(() => props.modalProps.maskModal, (newVal) => {
 
 const contentCompRef = ref()
 
+const darkmode = document.getElementsByTagName('body')[0].classList.contains('dark-mode') ? ref('dark') : ref('light')
+
 const { eventBus: EventBus } = inject(props.modalProps.injectKey)
 
 const showModal = ref(false)
@@ -169,7 +172,6 @@ onBeforeUnmount(() => {
 .container {
   --skin-color: #FFFFFF;
 }
-
 .vue-button.x-tool-close {
   background-image: none !important;
 }

diff --git a/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue b/tine20/library/ExtJS/src/widgets/VueMessageBox/App.vue
@@ -2,12 +2,13 @@
   <BModal v-model="showModal"
           :title="props.opt.title"
           :title-class="'title'"
-          :modal-class="'bootstrap-scope vue-message-box'"
+          :modal-class="'bootstrap-scope vue-message-box dark-reverse'"
           :hide-header-close="!props.opt.closable"
           :hide-footer="!props.opt.buttons"
           :centered="true"
           :no-fade="true"
           :lazy="true"
+          v-bind:data-bs-theme="darkmode"
           :noCloseOnBackdrop="true"
           :noCloseOnEsc="true"
           @close="closeBox" :style="{'z-index': otherConfigs.zIndex}"
@@ -77,6 +78,8 @@ const progressBarVisibility = ref(false);
 const textAreaHeight = ref(0);
 const textElValue = ref("");
 
+const darkmode = document.getElementsByTagName('body')[0].classList.contains('dark-mode') ? ref('dark') : ref('light')
+
 const init = async function () {
   if (props.opt.prompt) {
     if (props.opt.multiline) {