Define custom colour style and their inverse in variables.less

webapp/src/assets/less/variables.less

@@ -160,27 +160,6 @@
 @sidebar-right-left: 0px;
 @sidebar-right-left-xl: 60px;
 
-/**
- * Self inverting colours
- *
- * These invert automatically when the theme inverts. these need to be used as css variables.
- * They can be used without importing uikit/src/less/uikit.theme.less fully into the
- * component.
- */
-
-:root {
-    --theme-text-colour: @global-color;
-    .hook-inverse() {
-        --theme-text-colour: @inverse-global-color;
-    }
-
-    --theme-primary-background: @global-primary-background;
-    .hook-inverse() {
-        --theme-primary-background: @inverse-primary-muted-color;
-    }
-
-}
-
 /*
  * Navbar
  */
@@ -281,3 +260,23 @@
     }
 
 }
+
+
+/*
+ * Interactive elements
+ */
+
+.ofm-muted-interactive-text{
+    color: @global-muted-color;
+
+    &:hover {
+        color: @global-color;
+    }
+}
+.hook-inverse() {
+    .ofm-muted-interactive-text{
+        &:hover {
+            color: @inverse-global-color;
+        }
+    }
+}

webapp/src/components/genericComponents/progressBar.vue

@@ -63,7 +63,7 @@ export default {
 
 .progress .indeterminate,
 .progress .determinate {
-  background-color: var(--theme-primary-background);
+  background-color: @global-primary-background;
 }
 
 .progress .indeterminate::before {

webapp/src/components/labThingsComponents/actionProgressBar.vue

@@ -81,7 +81,7 @@ export default {
 
 .progress .indeterminate,
 .progress .determinate {
-  background-color: var(--theme-primary-background);
+  background-color: @global-primary-background;
 }
 
 .progress .indeterminate::before {

webapp/src/components/ui/matrixDisplay.vue

@@ -15,7 +15,7 @@
     </div>
 
     <button
-      class="copy-button"
+      class="copy-button ofm-muted-interactive-text"
       :class="{ success: copied }"
       :title="'Copy as Python list'"
       @click="copyMatrix"
@@ -142,14 +142,9 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: @global-muted-color;
   transition: color 0.2s ease;
 }
 
-.copy-button:hover {
-  color: var(--themed-global-colour);
-}
-
 .copy-button.success {
   color: #4caf50;