diff --git a/resources/vars-dark.scss b/resources/vars-dark.scss
index b4e8a8e7c9..6e4f78d96b 100644
--- a/resources/vars-dark.scss
+++ b/resources/vars-dark.scss
@@ -47,6 +47,9 @@ $color_user_submission_activity4: #39d353;
 $color_info25: #023;
 $color_info50: #068;
 $color_info100: #7df;
+$color_success25: #031;
+$color_success50: #172;
+$color_success100: #6f8;
 $color_warning25: #320;
 $color_warning50: #960;
 $color_warning100: #fd6;
diff --git a/resources/vars-default.scss b/resources/vars-default.scss
index 97d3af1ada..407d988879 100644
--- a/resources/vars-default.scss
+++ b/resources/vars-default.scss
@@ -47,6 +47,9 @@ $color_user_submission_activity4: #216e39;
 $color_info25: #def;
 $color_info50: #bdf;
 $color_info100: #368;
+$color_success25: #ded;
+$color_success50: #adb;
+$color_success100: #173;
 $color_warning25: #ffd;
 $color_warning50: #feb;
 $color_warning100: #863;
diff --git a/resources/widgets.scss b/resources/widgets.scss
index 95c51e0862..66488803e5 100644
--- a/resources/widgets.scss
+++ b/resources/widgets.scss
@@ -476,33 +476,33 @@ a.close {
         border-radius: 5px;
 
         &.debug {
-            color: #383d41;
-            background-color: #e2e3e5;
-            border-color: #d6d8db;
+            color: $color_primary75;
+            background-color: $color_primary10;
+            border-color: $color_primary25;
         }
 
         &.info {
-            color: #0c5460;
-            background-color: #d1ecf1;
-            border-color: #bee5eb;
+            color: $color_info100;
+            background-color: $color_info25;
+            border-color: $color_info50;
         }
 
         &.success {
-            color: #155724;
-            background-color: #d4edda;
-            border-color: #c3e6cb;
+            color: $color_success100;
+            background-color: $color_success25;
+            border-color: $color_success50;
         }
 
         &.warning {
-            color: #856404;
-            background-color: #fff3cd;
-            border-color: #ffeeba;
+            color: $color_warning100;
+            background-color: $color_warning25;
+            border-color: $color_warning50;
         }
 
         &.error {
-            color: #721c24;
-            background-color: #f8d7da;
-            border-color: #f5c6cb;
+            color: $color_danger100;
+            background-color: $color_danger25;
+            border-color: $color_danger50;
         }
     }
 }