diff --git a/app/assets/stylesheets/common/base/d-popover.scss b/app/assets/stylesheets/common/base/d-popover.scss
index 588aa1d2fc9..ef84d8cd909 100644
--- a/app/assets/stylesheets/common/base/d-popover.scss
+++ b/app/assets/stylesheets/common/base/d-popover.scss
@@ -15,14 +15,8 @@ $d-popover-border: var(--primary-low);
   top: -10px;
 }
 
-.tippy-rounded-arrow {
-  fill: $d-popover-background;
-  .svg-arrow {
-    fill: $d-popover-border;
-  }
-  .svg-content {
-    fill: $d-popover-background;
-  }
+.tippy-svg-arrow > svg {
+  color: $d-popover-background;
 }
 
 [data-tooltip] > *,
diff --git a/app/assets/stylesheets/common/base/user-tips.scss b/app/assets/stylesheets/common/base/user-tips.scss
index e78534ccc15..644d6ccd982 100644
--- a/app/assets/stylesheets/common/base/user-tips.scss
+++ b/app/assets/stylesheets/common/base/user-tips.scss
@@ -1,3 +1,30 @@
+.tippy-box[data-theme="user-tips"] {
+  background-color: var(--tertiary);
+  color: var(--secondary);
+  border-color: var(--tertiary);
+
+  .btn-flat {
+    color: var(--secondary);
+
+    &:hover {
+      color: var(--d-hover);
+    }
+  }
+
+  .btn-primary {
+    background: var(--secondary);
+    color: var(--tertiary);
+
+    &:hover {
+      color: var(--tertiary-hover);
+    }
+  }
+
+  > .tippy-svg-arrow > svg {
+    color: var(--tertiary);
+  }
+}
+
 .user-tip {
   z-index: z("composer", "content") - 1;
 }