From 86fbbc75de9c9996036320bee007cb594a2ebf23 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Thu, 25 Jun 2026 09:34:43 +0100
Subject: [PATCH] Style gallery filter for dark mode

---
 webapp/src/assets/less/variables.less         | 42 +++++++++++++++++++
 .../genericComponents/multiSelectDropdown.vue | 32 ++++----------
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/webapp/src/assets/less/variables.less b/webapp/src/assets/less/variables.less
index 364b7304..a7cc44ce 100644
--- a/webapp/src/assets/less/variables.less
+++ b/webapp/src/assets/less/variables.less
@@ -270,6 +270,48 @@
     }
 }
 
+// A button styled like text. For use in menus
+.ofm-text-button {
+  display: block;
+  background: none;
+  border: none;
+  padding: 8px 10px;
+  cursor: pointer;
+  color: @global-color;
+  width: 100%;
+  text-align: left;
+  font-weight: 600;
+}
+.hook-inverse() {
+    .ofm-text-button{
+        color: @inverse-global-color;
+    }
+}
+
+/*
+ * Opaque - button-like colours
+ *
+ * The buttons are transparent. If an element overlays others it should
+ * Look the same as the buttons, but have no transparency.
+ */
+.ofm-opaque-element{
+    background: #f5f5f5;
+}
+.hook-inverse() {
+    .ofm-opaque-element{
+        background: #282626;
+    }
+}
+
+.ofm-opaque-highlight:hover {
+  background: #fff;
+}
+.hook-inverse() {
+    .ofm-opaque-highlight:hover {
+        background: #000;
+    }
+}
+
 /*
  * Accordion
  */
diff --git a/webapp/src/components/genericComponents/multiSelectDropdown.vue b/webapp/src/components/genericComponents/multiSelectDropdown.vue
index 7d32d120..6f89e866 100644
--- a/webapp/src/components/genericComponents/multiSelectDropdown.vue
+++ b/webapp/src/components/genericComponents/multiSelectDropdown.vue
@@ -1,15 +1,19 @@
 <template>
   <div ref="multiselect" class="multi-select">
-    <div class="dropdown-top" :class="{ open: isOpen }" @click="isOpen = !isOpen">
+    <div
+      class="dropdown-top ofm-opaque-element ofm-opaque-highlight"
+      :class="{ open: isOpen }"
+      @click="isOpen = !isOpen"
+    >
       <span class="dropdown-top-text">{{ title }}</span>
       <span>{{ arrow }}</span>
     </div>
 
-    <div v-if="isOpen" class="dropdown-menu">
-      <button class="text-button" @click="selectAll">Select All</button>
-      <button class="text-button" @click="selectNone">Select None</button>
+    <div v-if="isOpen" class="dropdown-menu ofm-opaque-element">
+      <button class="ofm-text-button ofm-opaque-highlight" @click="selectAll">Select All</button>
+      <button class="ofm-text-button ofm-opaque-highlight" @click="selectNone">Select None</button>
       <hr class="dropdown-separator" />
-      <label v-for="option in options" :key="option" class="dropdown-item">
+      <label v-for="option in options" :key="option" class="dropdown-item ofm-opaque-highlight">
         <input
           type="checkbox"
           class="uk-checkbox"
@@ -108,7 +112,6 @@ export default {
   padding: 8px 12px;
   border-radius: 4px;
   cursor: pointer;
-  background: #f5f5f5;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -130,34 +133,17 @@ export default {
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   border-radius: 0 0 4px 4px;
-  background: #f5f5f5;
   max-height: 250px;
   overflow-y: auto;
   z-index: 1000;
 }
 
-.text-button {
-  display: block;
-  background: none;
-  border: none;
-  padding: 8px 10px;
-  cursor: pointer;
-  width: 100%;
-  text-align: left;
-  font-weight: 600;
-}
-
 .dropdown-item {
   display: block;
   padding: 8px 12px;
   cursor: pointer;
 }
 
-.text-button:hover,
-.dropdown-item:hover {
-  background: #fff;
-}
-
 .dropdown-separator {
   margin: 5px;
 }