diff --git a/conversejs/custom/sass/_peertubetheme.scss b/conversejs/custom/sass/_peertubetheme.scss
index 25c042a1..1030a1b9 100644
--- a/conversejs/custom/sass/_peertubetheme.scss
+++ b/conversejs/custom/sass/_peertubetheme.scss
@@ -10,6 +10,12 @@
     background-color: var(--peertube-main-background);
   }
 
+  .button-cancel,
+  .btn-secondary,
+  .badge-secondary {
+    color: var(--peertube-button-foreground);
+  }
+
   // hidding avatars when screen width is not big enough.
   @media screen and (max-width: 576px) {
     .message {
diff --git a/conversejs/custom/sass/_variables.scss b/conversejs/custom/sass/_variables.scss
index d0c3b00e..4b173d39 100644
--- a/conversejs/custom/sass/_variables.scss
+++ b/conversejs/custom/sass/_variables.scss
@@ -64,8 +64,8 @@
   --highlight-color-darker: var(--peertube-grey-foreground); // FIXME: dont know if it is used, and what it is.
   --primary-color: var(--peertube-button-background);
   --primary-color-dark: var(--peertube-button-background);
-  --secondary-color: var(--peertube-grey-background);
-  --secondary-color-dark: var(--peertube-grey-background);
+  --secondary-color: var(--peertube-button-background);
+  --secondary-color-dark: var(--peertube-button-background);
   --warning-color: var(--orange);
   --warning-color-dark: #d2842b;
   --danger-color: #d24e2b;