diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts index 90e3abb9..d869c74c 100644 --- a/site/docusaurus.config.ts +++ b/site/docusaurus.config.ts @@ -75,7 +75,6 @@ const config: Config = { ], }, footer: { - style: 'dark', links: [ { title: 'Docs', diff --git a/site/src/css/custom.css b/site/src/css/custom.css index 2bc6a4cf..dace290e 100644 --- a/site/src/css/custom.css +++ b/site/src/css/custom.css @@ -6,7 +6,9 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; + --ifm-background-color: #f1f6f8; + + --ifm-color-primary: #3c647c; --ifm-color-primary-dark: #29784c; --ifm-color-primary-darker: #277148; --ifm-color-primary-darkest: #205d3b; @@ -15,6 +17,13 @@ --ifm-color-primary-lightest: #3cad6e; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); + + --ifm-footer-background-color: #3c647c; + --ifm-footer-title-color: #fff; + --ifm-footer-link-color: #ffffffaa; + --ifm-footer-color: #ffffffaa; + + --ifm-footer-link-hover-color: #ffffffdd; } /* For readability concerns, you should choose a lighter palette in dark mode. */ diff --git a/site/src/pages/index.module.css b/site/src/pages/index.module.css index 14337c28..d101b4a6 100644 --- a/site/src/pages/index.module.css +++ b/site/src/pages/index.module.css @@ -4,7 +4,7 @@ */ .heroBanner { - background: #4391B2; + background: var(--ifm-color-primary); padding: 4rem 0; text-align: center; position: relative; diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx index b9509fc9..8b01917f 100644 --- a/site/src/pages/index.tsx +++ b/site/src/pages/index.tsx @@ -4,12 +4,26 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; import HomepageFeatures from '@site/src/components/HomepageFeatures'; import Heading from '@theme/Heading'; +import { useColorMode } from '@docusaurus/theme-common'; + import styles from './index.module.css'; +import HeaderBorderTop from '@site/static/img/hero-border-top.svg'; +import HeaderBorderBottom from '@site/static/img/hero-border-bottom.svg'; + +import HeaderBorderTopDark from '@site/static/img/hero-border-top.svg'; +import HeaderBorderBottomDark from '@site/static/img/hero-border-bottom.svg'; + function HomepageHeader() { const { siteConfig } = useDocusaurusContext(); + const { isDarkTheme } = useColorMode(); + return ( + <> +
+ {isDarkTheme ? : } +
@@ -25,6 +39,10 @@ function HomepageHeader() {
+
+ {isDarkTheme ? : } +
+ ); } diff --git a/site/src/theme/Footer/index.tsx b/site/src/theme/Footer/index.tsx new file mode 100644 index 00000000..f202374c --- /dev/null +++ b/site/src/theme/Footer/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import Footer from '@theme-original/Footer'; +import type FooterType from '@theme/Footer'; +import type {WrapperProps} from '@docusaurus/types'; +import { useColorMode } from '@docusaurus/theme-common'; + +import Prefooter from '@site/static/img/prefooter.svg'; +import PrefooterDark from '@site/static/img/prefooter.svg'; + +type Props = WrapperProps; + +export default function FooterWrapper(props: Props): JSX.Element { + const { isDarkTheme } = useColorMode(); + return ( + <> +
+ {isDarkTheme ? : } +
+