diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
index a6fc9e1bfe0..b5d2d516973 100644
--- a/app/styles/_variables.scss
+++ b/app/styles/_variables.scss
@@ -478,9 +478,10 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
   --dialog-error-color: #{$red};
 
   /** Banner */
-  --banner-warning-background: #{$yellow-700};
+  --banner-warning-background: #{$yellow-100};
   --banner-warning-text-color: var(--text-color);
-  --banner-warning-link-color: #{$blue-700};
+  --banner-warning-link-color: #{$blue};
+  --banner-warning-icon-color: #{darken($yellow-700, 10%)};
 
   /** File warning */
   --file-warning-background-color: #{$yellow-100};
diff --git a/app/styles/themes/_dark.scss b/app/styles/themes/_dark.scss
index 2bb15456221..9de9ad46139 100644
--- a/app/styles/themes/_dark.scss
+++ b/app/styles/themes/_dark.scss
@@ -377,9 +377,10 @@ body.theme-dark {
   --dialog-error-color: #{$red-600};
 
   /** Banner */
-  --banner-warning-background: #{darken($orange-900, 20%)};
+  --banner-warning-background: #{rgba($yellow-900, 0.4)};
   --banner-warning-text-color: var(--text-color);
-  --banner-warning-link-color: #4285fb;
+  --banner-warning-link-color: #78a8fc;
+  --banner-warning-icon-color: #{$yellow-700};
 
   /** File warning */
   --file-warning-background-color: #{rgba($yellow-900, 0.4)};
diff --git a/app/styles/ui/banners/_update-available.scss b/app/styles/ui/banners/_update-available.scss
index 79a21df2cdd..c0d1e36073a 100644
--- a/app/styles/ui/banners/_update-available.scss
+++ b/app/styles/ui/banners/_update-available.scss
@@ -2,6 +2,7 @@
   .download-icon,
   .warning-icon {
     margin-right: var(--spacing);
+    color: var(--banner-warning-icon-color);
   }
 
   .banner-emoji {