From 4855ab8e9f8b3a7711b5f85a400464c4504814d8 Mon Sep 17 00:00:00 2001
From: Wassim Bougarfa <12980387+wassimoo@users.noreply.github.com>
Date: Fri, 5 Jun 2026 15:42:14 +0200
Subject: [PATCH] fix: enhance dark mode styling for announcement banner

---
 .../AnnouncementBanner.module.css             | 29 +++++++++++++++++++
 .../AnnouncementBanner/AnnouncementBanner.tsx |  8 ++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/AnnouncementBanner/AnnouncementBanner.module.css b/src/components/AnnouncementBanner/AnnouncementBanner.module.css
index 3fb9f7755..a59068b04 100644
--- a/src/components/AnnouncementBanner/AnnouncementBanner.module.css
+++ b/src/components/AnnouncementBanner/AnnouncementBanner.module.css
@@ -7,3 +7,32 @@
 .announcementContent a:hover {
   color: #581c87;
 }
+
+[data-theme="dark"] .announcementContent a:hover {
+  color: #d8b4fe;
+}
+
+/* Dark mode overrides keyed to Docusaurus's data-theme attribute */
+[data-theme="dark"] .warning {
+  border-color: #92400e;
+  background-color: #451a03;
+  color: #fef3c7;
+}
+
+[data-theme="dark"] .error {
+  border-color: #991b1b;
+  background-color: #450a0a;
+  color: #fee2e2;
+}
+
+[data-theme="dark"] .success {
+  border-color: #065f46;
+  background-color: #022c22;
+  color: #d1fae5;
+}
+
+[data-theme="dark"] .info {
+  border-color: #4c1d95;
+  background-color: #2e1065;
+  color: #ede9fe;
+}
diff --git a/src/components/AnnouncementBanner/AnnouncementBanner.tsx b/src/components/AnnouncementBanner/AnnouncementBanner.tsx
index 4bcf3a244..585699b20 100644
--- a/src/components/AnnouncementBanner/AnnouncementBanner.tsx
+++ b/src/components/AnnouncementBanner/AnnouncementBanner.tsx
@@ -9,14 +9,14 @@ type AnnouncementLevel = "info" | "warning" | "error" | "success"
 function getLevelClasses(level: AnnouncementLevel) {
   switch (level) {
     case "warning":
-      return "border-amber-200 bg-amber-50 text-amber-950"
+      return `border-amber-200 bg-amber-50 text-amber-950 ${styles.warning}`
     case "error":
-      return "border-red-200 bg-red-50 text-red-950"
+      return `border-red-200 bg-red-50 text-red-950 ${styles.error}`
     case "success":
-      return "border-emerald-200 bg-emerald-50 text-emerald-950"
+      return `border-emerald-200 bg-emerald-50 text-emerald-950 ${styles.success}`
     case "info":
     default:
-      return "border-purple-200 bg-purple-50 text-purple-950"
+      return `border-purple-200 bg-purple-50 text-purple-950 ${styles.info}`
   }
 }