diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index a94a54b60c81a..94d1da3be3afb 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -78,8 +78,6 @@ const config = {
       announcementBar: {
         id: 'site_announcement_immich',
         content: `⚠️ The project is under <strong>very active</strong> development. Expect bugs and changes. Do not use it as <strong>the only way</strong> to store your photos and videos!`,
-        backgroundColor: '#593f00',
-        textColor: '#ffefc9',
         isCloseable: false,
       },
       docs: {
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 18246e6432861..c6ed29f12d3ad 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -43,8 +43,15 @@ img {
   --ifm-color-primary-lightest: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   --ifm-background-color: #070a14;
+
+  div[class^='announcementBar_'] {
+    background-color: #f9fafe;
+    color: black;
+  }
 }
 
 div[class^='announcementBar_'] {
   min-height: 2rem;
+  background-color: #2b3336;
+  color: white;
 }