diff --git a/src/app.css b/src/app.css
index bc254d31..c55b9a2f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1925,11 +1925,11 @@ body > .szh-menu-container {
   .szh-menu__item:not(.szh-menu__item--disabled):not(
     .szh-menu__item--hover
   ).danger {
-  color: var(--red-color);
+  color: var(--red-text-color);
 }
 .szh-menu
   .szh-menu__item.danger:not(.szh-menu__item--disabled).szh-menu__item--hover {
-  background-color: var(--red-color);
+  background-color: var(--red-text-color);
 }
 .szh-menu
   .szh-menu__item:not(.szh-menu__item--disabled):not(
diff --git a/src/index.css b/src/index.css
index e6dde279..7025ae9f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,6 +24,11 @@
     transparent
   );
   --red-color: orangered;
+  --red-text-color: color-mix(
+    in srgb-linear,
+    var(--red-color) 60%,
+    var(--text-color) 40%
+  );
   --red-bg-color: color-mix(in lch, var(--red-color) 40%, transparent);
   --bg-color: #fff;
   --bg-faded-color: #f0f2f5;