diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 52d021c1..554eddd4 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -58,9 +58,7 @@ const config: Config = {
},
announcementBar: {
id: "code_remix",
- content:
- "Now announcing the inaugural Code Remix Summit – in Miami May 12th-14th. Use the code MODERNE3VIP for an additional $300 off.",
- backgroundColor: "#555555",
+ content: 'Now announcing the inaugural Code Remix Summit – in Miami May 12th-14th. Use the code MODERNE3VIP for an additional $300 off.',
textColor: "#E3F2FD",
},
colorMode: {
diff --git a/src/css/custom.css b/src/css/custom.css
index 4af9e484..7a7a5715 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -6,13 +6,13 @@
/* You can override the default Infima variables here. */
:root {
- --ifm-color-primary: #283af7;
- --ifm-color-primary-dark: #0c21f6;
- --ifm-color-primary-darker: #091ceb;
- --ifm-color-primary-darkest: #0717c2;
- --ifm-color-primary-light: #4453f8;
- --ifm-color-primary-lighter: #5260f9;
- --ifm-color-primary-lightest: #7b86fa;
+ --ifm-color-primary: #4169e1;
+ --ifm-color-primary-dark: #2855dd;
+ --ifm-color-primary-darker: #224ed5;
+ --ifm-color-primary-darkest: #1c41af;
+ --ifm-color-primary-light: #5a7de5;
+ --ifm-color-primary-lighter: #6787e7;
+ --ifm-color-primary-lightest: #8ca4ed;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
diff --git a/src/theme/AnnouncementBar/CloseButton/index.tsx b/src/theme/AnnouncementBar/CloseButton/index.tsx
new file mode 100644
index 00000000..999bcd56
--- /dev/null
+++ b/src/theme/AnnouncementBar/CloseButton/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import IconClose from '@theme/Icon/Close';
+import type {Props} from '@theme/AnnouncementBar/CloseButton';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarCloseButton(
+ props: Props,
+): JSX.Element | null {
+ return (
+
+ );
+}
diff --git a/src/theme/AnnouncementBar/CloseButton/styles.module.css b/src/theme/AnnouncementBar/CloseButton/styles.module.css
new file mode 100644
index 00000000..0494ec0d
--- /dev/null
+++ b/src/theme/AnnouncementBar/CloseButton/styles.module.css
@@ -0,0 +1,4 @@
+.closeButton {
+ padding: 0;
+ line-height: 0;
+}
diff --git a/src/theme/AnnouncementBar/Content/index.tsx b/src/theme/AnnouncementBar/Content/index.tsx
new file mode 100644
index 00000000..1e1a7d41
--- /dev/null
+++ b/src/theme/AnnouncementBar/Content/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import type {Props} from '@theme/AnnouncementBar/Content';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarContent(
+ props: Props,
+): JSX.Element | null {
+ const {announcementBar} = useThemeConfig();
+ const {content} = announcementBar!;
+ return (
+
+ );
+}
diff --git a/src/theme/AnnouncementBar/Content/styles.module.css b/src/theme/AnnouncementBar/Content/styles.module.css
new file mode 100644
index 00000000..16635d4b
--- /dev/null
+++ b/src/theme/AnnouncementBar/Content/styles.module.css
@@ -0,0 +1,10 @@
+.content {
+ font-size: 85%;
+ text-align: center;
+ padding: 5px 0;
+}
+
+.content a {
+ color: inherit;
+ text-decoration: underline;
+}
diff --git a/src/theme/AnnouncementBar/index.tsx b/src/theme/AnnouncementBar/index.tsx
new file mode 100644
index 00000000..557212c0
--- /dev/null
+++ b/src/theme/AnnouncementBar/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
+
+import styles from './styles.module.css';
+
+export default function AnnouncementBar(): JSX.Element | null {
+ const {announcementBar} = useThemeConfig();
+ const {isActive, close} = useAnnouncementBar();
+ if (!isActive) {
+ return null;
+ }
+ const {textColor, isCloseable} = announcementBar!;
+ return (
+
+ {isCloseable &&
}
+
+ {isCloseable && (
+
+ )}
+