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}`
   }
 }