diff --git a/webapp/src/assets/less/variables.less b/webapp/src/assets/less/variables.less
index bf0e9bcf..364b7304 100644
--- a/webapp/src/assets/less/variables.less
+++ b/webapp/src/assets/less/variables.less
@@ -160,6 +160,27 @@
 @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
  */
diff --git a/webapp/src/components/genericComponents/progressBar.vue b/webapp/src/components/genericComponents/progressBar.vue
index 0b3074b8..d3be8815 100644
--- a/webapp/src/components/genericComponents/progressBar.vue
+++ b/webapp/src/components/genericComponents/progressBar.vue
@@ -63,14 +63,7 @@ export default {
 
 .progress .indeterminate,
 .progress .determinate {
-  background-color: @global-primary-background;
-}
-
-.hook-inverse() {
-  .progress .indeterminate,
-  .progress .determinate {
-    background-color: @inverse-primary-muted-color;
-  }
+  background-color: var(--theme-primary-background);
 }
 
 .progress .indeterminate::before {
diff --git a/webapp/src/components/labThingsComponents/actionProgressBar.vue b/webapp/src/components/labThingsComponents/actionProgressBar.vue
index 1480e098..ce14bf7b 100644
--- a/webapp/src/components/labThingsComponents/actionProgressBar.vue
+++ b/webapp/src/components/labThingsComponents/actionProgressBar.vue
@@ -81,14 +81,7 @@ export default {
 
 .progress .indeterminate,
 .progress .determinate {
-  background-color: @global-primary-background;
-}
-
-.hook-inverse() {
-  .progress .indeterminate,
-  .progress .determinate {
-    background-color: @inverse-primary-muted-color;
-  }
+  background-color: var(--theme-primary-background);
 }
 
 .progress .indeterminate::before {
diff --git a/webapp/src/components/ui/matrixDisplay.vue b/webapp/src/components/ui/matrixDisplay.vue
index d0c2249a..0cdf0ec4 100644
--- a/webapp/src/components/ui/matrixDisplay.vue
+++ b/webapp/src/components/ui/matrixDisplay.vue
@@ -147,13 +147,7 @@ export default {
 }
 
 .copy-button:hover {
-  color: @global-color;
-}
-
-.hook-inverse() {
-  .copy-button:hover {
-    color: @inverse-global-color;
-  }
+  color: var(--themed-global-colour);
 }
 
 .copy-button.success {