Adjust some colors to monochrome

AndBible · Dec 28, 2024 · 5619645 · 5619645
1 parent 54f7a53
commit 5619645
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 2 deletions.
diff --git a/app/bibleview-js/src/common.scss b/app/bibleview-js/src/common.scss
@@ -98,6 +98,9 @@ $button-grey: #8e8e8e;
 .button {
   font-size: 90%;
   background-color: $button-grey;
+  .monochrome & {
+    background-color: black;
+  }
   + .toggled {
     background-color: #474747;
     &.light {
@@ -106,11 +109,18 @@ $button-grey: #8e8e8e;
   }
   &.light {
     background-color: #bdbdbd;
+    .monochrome & {
+      background-color: white;
+    }
     color: black;
     .night & {
       background-color: #616161;
       color: #bdbdbd;
     }
+    .night.monochrome & {
+      background-color: black;
+      color: white;
+    }
   }
   &.warning {
     background: rgba(255, 0, 0, 0.5);

diff --git a/app/bibleview-js/src/components/AmbiguousActionButtons.vue b/app/bibleview-js/src/components/AmbiguousActionButtons.vue
@@ -178,6 +178,12 @@ setupKeyboardListener((e: KeyboardEvent) => {
     //    padding-inline-end: 14px;  // Causes non-alignment of the icons in the verse action dialog.
     .horizontal & {
       color: $button-grey;
+      .monochrome & {
+        color: black;
+      }
+      .night.monochrome & {
+        color: white;
+      }
       margin: 0 auto 0 auto;
       padding-bottom: 5px;
       $size: 20px;

diff --git a/app/bibleview-js/src/components/BibleView.vue b/app/bibleview-js/src/components/BibleView.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <div @click="ambiguousSelection?.handle" :class="{night: appSettings.nightMode, noAnimation}" :style="topStyle" :dir="direction">
+  <div @click="ambiguousSelection?.handle" :class="{night: appSettings.nightMode, noAnimation, monochrome: appSettings.monochromeMode}" :style="topStyle" :dir="direction">
     <div class="background" :style="backgroundStyle"/>
     <div :style="`height:${calculatedConfig.topOffset}px`"/>
     <div :style="modalStyle" id="modals"/>

diff --git a/app/bibleview-js/src/components/BookmarkButtons.vue b/app/bibleview-js/src/components/BookmarkButtons.vue
@@ -186,6 +186,12 @@ const {strings} = useCommon();
   cursor: pointer;
   font-size: 25px;
   color: $button-grey;
+  .monochrome & {
+    color: black;
+  }
+  .monochrome.night & {
+    color: white;
+  }
   padding: 5px;
 
   &.end {

diff --git a/app/bibleview-js/src/components/modals/BookmarkModal.vue b/app/bibleview-js/src/components/modals/BookmarkModal.vue
@@ -257,7 +257,9 @@ async function toggleInfo(event: MouseEvent | TouchEvent) {
   .night & {
     background: linear-gradient(90deg, rgba(0, 0, 0, 0), $night-modal-header-background-color 75%, $night-modal-header-background-color 100%);
   }
-
+  .monochrome & {
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0), black 75%, black 100%);
+  }
   [dir=ltr] & {
     right: 80px;
   }

diff --git a/app/bibleview-js/src/components/modals/ModalDialog.vue b/app/bibleview-js/src/components/modals/ModalDialog.vue
@@ -216,6 +216,11 @@ $border-radius2: $border-radius - 1.5pt;
   padding-left: 0.5em;
   background-color: $modal-header-background-color;
   --header-backround: #{$modal-header-background-color};
+  .monochrome & {
+    background-color: black;
+    --header-backround: black;
+
+  }
   color: white;
   font-weight: bold;
   border-radius: $border-radius2 $border-radius2 0 0;
@@ -225,6 +230,11 @@ $border-radius2: $border-radius - 1.5pt;
     --header-backround: #{$night-modal-header-background-color};
     color: #e2e2e2;
   }
+  .monochrome.night & {
+    background-color: black;
+    --header-backround: black;
+    color: white;
+  }
 }
 
 .modal-toolbar {