diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css
index ffef40779ec..1113ad357b6 100644
--- a/web_src/css/modules/toast.css
+++ b/web_src/css/modules/toast.css
@@ -1,6 +1,5 @@
 .toastify {
   color: var(--color-text);
-  background: var(--color-menu);
   border: 1px solid var(--color-secondary);
   position: fixed;
   opacity: 0;
@@ -18,6 +17,26 @@
   opacity: 1;
 }
 
+.toast-success {
+  background: var(--color-success-bg);
+  border-color: var(--color-success-border);
+}
+
+.toast-info {
+  background: var(--color-info-bg);
+  border-color: var(--color-info-border);
+}
+
+.toast-warning {
+  background: var(--color-warning-bg);
+  border-color: var(--color-warning-border);
+}
+
+.toast-error {
+  background: var(--color-error-bg);
+  border-color: var(--color-error-border);
+}
+
 .toast-success .toast-icon { color: var(--color-success-text); }
 .toast-info .toast-icon { color: var(--color-info-text); }
 .toast-warning .toast-icon { color: var(--color-warning-text); }