diff --git a/microsite/docusaurus.config.ts b/microsite/docusaurus.config.ts
index 71331710d5..989b659cf9 100644
--- a/microsite/docusaurus.config.ts
+++ b/microsite/docusaurus.config.ts
@@ -101,23 +101,23 @@ const config: Config = {
sidebarPath: 'sidebars.ts',
...(useVersionedDocs
? {
- includeCurrentVersion: true,
- lastVersion: 'stable',
- versions: {
- stable: {
- label: 'Stable',
- path: '/',
- banner: 'none',
- badge: false,
- },
- current: {
- label: 'Next',
- path: '/next',
- banner: 'unreleased',
- badge: true,
- },
+ includeCurrentVersion: true,
+ lastVersion: 'stable',
+ versions: {
+ stable: {
+ label: 'Stable',
+ path: '/',
+ banner: 'none',
+ badge: false,
},
- }
+ current: {
+ label: 'Next',
+ path: '/next',
+ banner: 'unreleased',
+ badge: true,
+ },
+ },
+ }
: undefined),
docItemComponent: '@theme/ApiItem',
},
@@ -343,13 +343,14 @@ const config: Config = {
],
colorMode: {
- defaultMode: 'dark',
- disableSwitch: true,
+ disableSwitch: false,
+ respectPrefersColorScheme: true
},
navbar: {
logo: {
alt: 'Backstage Software Catalog and Developer Platform',
- src: 'img/logo.svg',
+ src: 'img/logo-black.svg',
+ srcDark: 'img/logo.svg'
},
items: [
{
@@ -394,11 +395,11 @@ const config: Config = {
},
...(useVersionedDocs
? [
- {
- type: 'docsVersionDropdown',
- position: 'right' as const,
- },
- ]
+ {
+ type: 'docsVersionDropdown',
+ position: 'right' as const,
+ },
+ ]
: []),
],
},
diff --git a/microsite/src/components/bannerSection/bannerSection.module.scss b/microsite/src/components/bannerSection/bannerSection.module.scss
index 64f4967d11..f6fe0536dc 100644
--- a/microsite/src/components/bannerSection/bannerSection.module.scss
+++ b/microsite/src/components/bannerSection/bannerSection.module.scss
@@ -38,13 +38,12 @@
}
&:global(.greyBackground) {
- background: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%);
+ background: var(--ifm-grey-background);
}
&:global(.greenGradientBackground) {
- background: linear-gradient(70.44deg, #121212 55%, #5d817b);
+ background: var(--ifm-green-gradient-background);
}
-
&:global(.greenBottomGradientBackground) {
background: linear-gradient(
178.64deg,
diff --git a/microsite/src/pages/home/_home.tsx b/microsite/src/pages/home/_home.tsx
index c0cf39ad9c..00691e8a75 100644
--- a/microsite/src/pages/home/_home.tsx
+++ b/microsite/src/pages/home/_home.tsx
@@ -7,9 +7,10 @@ import { ContentBlock } from '@site/src/components/contentBlock/contentBlock';
import Layout from '@theme/Layout';
import { clsx } from 'clsx';
import React, { useState } from 'react';
-
+import ThemedImage from '@theme/ThemedImage';
import homeStyles from './home.module.scss';
import { HubSpotNewAdoptersForm } from './_hubSpotNewAdoptersForm';
+import useBaseUrl from '@docusaurus/useBaseUrl';
const hiddenNewsletterBannerKey = 'hiddenNewsletterBanner';
@@ -528,10 +529,13 @@ const HomePage = () => {
incubation project
-
diff --git a/microsite/src/theme/customTheme.scss b/microsite/src/theme/customTheme.scss
index 51615ed0dc..905321ba13 100644
--- a/microsite/src/theme/customTheme.scss
+++ b/microsite/src/theme/customTheme.scss
@@ -6,7 +6,14 @@
--ifm-color-primary-dark: #31a792;
--ifm-color-primary-darker: #2e9e8a;
--ifm-color-primary-darkest: #268271;
+ --ifm-grey-background-light: linear-gradient(90.49deg, #e0e0e0 15.36%, #f5f5f5 70.44%);
+ --ifm-grey-background-dark: linear-gradient(90.49deg, #121212 15.36%, #282828 70.44%);
+ --ifm-green-gradient-background-light: linear-gradient(70.44deg, #e0f7f4 55%, #a3d9d2);
+ --ifm-green-gradient-background-dark: linear-gradient(70.44deg, #121212 55%, #5d817b);
+ --ifm-bullet-line-dark: linear-gradient( 89.75deg, #9bf0e1 -1.5%, rgba(155, 240, 225, 0) 111.48%);
+ --ifm-bullet-line-light: linear-gradient( 89.75deg, var(--ifm-color-primary-dark) -1.5%, rgba(155, 240, 225, 0) 111.48%);
}
+
// for docs and releases
#__docusaurus {
.theme-doc-markdown {
@@ -46,7 +53,7 @@
}
}
.footerLogo {
- background-image: url(/img/logo.svg);
+ background-image: var(--backstage-logo);
background-repeat: no-repeat;
height: 40px;
width: 180px;
@@ -86,11 +93,7 @@
/* #region Utility component styles */
.bulletLine {
height: 3px;
- background: linear-gradient(
- 89.75deg,
- #9bf0e1 -1.5%,
- rgba(155, 240, 225, 0) 111.48%
- );
+ background: var(--bullet-line-color);
}
/* #endregion */
diff --git a/microsite/src/theme/variables.scss b/microsite/src/theme/variables.scss
index 3d74e59c9c..1f5dc0dd5a 100644
--- a/microsite/src/theme/variables.scss
+++ b/microsite/src/theme/variables.scss
@@ -1,2 +1,20 @@
$xlUpBreakpoint: 1441px;
$desktopUpBreakpoint: 997px;
+
+html[data-theme='dark']{
+ --ifm-grey-background: var(--ifm-grey-background-dark);
+ --ifm-green-gradient-background: var(--ifm-green-gradient-background-dark);
+ --backstage-logo: url(/img/logo.svg);
+ --bullet-line-color: var(--ifm-bullet-line-dark);
+ --ifm-button-border-color: var(--ifm-color-primary-darker);
+}
+
+html[data-theme='light']{
+ --ifm-grey-background: var(--ifm-grey-background-light);
+ --ifm-green-gradient-background: var(--ifm-green-gradient-background-light);
+ --ifm-breadcrumb-color-active: var(--ifm-color-primary-darker);
+ --ifm-menu-color-active: var(--ifm-color-primary-darker);
+ --ifm-link-color: var(--ifm-color-primary-darker);
+ --backstage-logo: url(/img/logo-black.svg);
+ --bullet-line-color: var(--ifm-bullet-line-light);
+}
diff --git a/microsite/static/img/logo-black.svg b/microsite/static/img/logo-black.svg
new file mode 100644
index 0000000000..b5ff591d1b
--- /dev/null
+++ b/microsite/static/img/logo-black.svg
@@ -0,0 +1 @@
+
\ No newline at end of file