diff --git a/src/theme/AnnouncementBar/index.tsx b/src/theme/AnnouncementBar/index.tsx
index 557212c0..089577d0 100644
--- a/src/theme/AnnouncementBar/index.tsx
+++ b/src/theme/AnnouncementBar/index.tsx
@@ -12,11 +12,10 @@ export default function AnnouncementBar(): JSX.Element | null {
   if (!isActive) {
     return null;
   }
-  const {textColor, isCloseable} = announcementBar!;
+  const {isCloseable} = announcementBar!;
   return (
     <div
       className={styles.announcementBar}
-      style={{backgroundImage: 'linear-gradient(45deg, #b12ade, #2546f0)', color: textColor}}
       role="banner">
       {isCloseable && <div className={styles.announcementBarPlaceholder} />}
       <AnnouncementBarContent className={styles.announcementBarContent} />
diff --git a/src/theme/AnnouncementBar/styles.module.css b/src/theme/AnnouncementBar/styles.module.css
index fee583f9..ce2eb07b 100644
--- a/src/theme/AnnouncementBar/styles.module.css
+++ b/src/theme/AnnouncementBar/styles.module.css
@@ -6,8 +6,8 @@
   display: flex;
   align-items: center;
   height: var(--docusaurus-announcement-bar-height);
-  background-color: var(--ifm-color-white);
-  color: var(--ifm-color-black);
+  background-color: var(--ifm-color-announcement-bar-bg);
+  color: var(--ifm-color-announcement-bar-text);
 
   /*
   Unfortunately we can't make announcement bar render above the navbar