diff --git a/microsite/docusaurus.config.ts b/microsite/docusaurus.config.ts
index 71331710d5..d71483ab8f 100644
--- a/microsite/docusaurus.config.ts
+++ b/microsite/docusaurus.config.ts
@@ -343,13 +343,14 @@ const config: Config = {
],
colorMode: {
+ disableSwitch: false,
defaultMode: 'dark',
- disableSwitch: true,
},
navbar: {
logo: {
alt: 'Backstage Software Catalog and Developer Platform',
- src: 'img/logo.svg',
+ src: 'img/logo-black.svg',
+ srcDark: 'img/logo.svg',
},
items: [
{
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/community/index.tsx b/microsite/src/pages/community/index.tsx
index 8c1736e1e9..9770c91e8e 100644
--- a/microsite/src/pages/community/index.tsx
+++ b/microsite/src/pages/community/index.tsx
@@ -5,6 +5,8 @@ import { BannerSectionGrid } from '@site/src/components/bannerSection/bannerSect
import Layout from '@theme/Layout';
import { clsx } from 'clsx';
import React from 'react';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
import { ContentBlock } from '../../components/contentBlock/contentBlock';
import communityStyles from './community.module.scss';
@@ -83,47 +85,47 @@ const Community = () => {
{
name: 'Frontside Software',
url: 'https://frontside.com/backstage/',
- logo: 'img/partner-logo-frontside.png',
+ logo: 'img/partner-logo-frontside',
},
{
name: 'RedHat',
url: 'https://developers.redhat.com/rhdh',
- logo: 'img/partner-logo-redhat.png',
+ logo: 'img/partner-logo-redhat',
},
{
name: 'Roadie',
url: 'https://roadie.io/',
- logo: 'img/partner-logo-roadie.png',
+ logo: 'img/partner-logo-roadie',
},
{
name: 'solo.io',
url: 'https://www.solo.io/spotlight/',
- logo: 'img/partner-logo-solo.png',
+ logo: 'img/partner-logo-solo',
},
{
name: 'ThoughtWorks',
url: 'https://www.thoughtworks.com/about-us/partnerships/technology/backstage-by-spotify',
- logo: 'img/partner-logo-thoughtworks.png',
+ logo: 'img/partner-logo-thoughtworks',
},
{
name: 'VMWare',
url: 'https://tanzu.vmware.com/developer-portal',
- logo: 'img/partner-logo-tanzubybroadcom.png',
+ logo: 'img/partner-logo-tanzubybroadcom',
},
{
name: 'StatusNeo',
url: 'https://statusneo.com/backstage',
- logo: 'img/partner-logo-statusneo.png',
+ logo: 'img/partner-logo-statusneo',
},
{
name: 'Alauda',
url: 'https://www.alauda.io/community/169249',
- logo: 'img/partner-logo-alauda.png',
+ logo: 'img/partner-logo-alauda',
},
{
name: 'Liatrio',
url: 'https://www.liatrio.com/service-offerings/backstage',
- logo: 'img/partner-logo-liatrio.png',
+ logo: 'img/partner-logo-liatrio',
},
];
//#endregion
@@ -233,7 +235,13 @@ const Community = () => {
{partners.map(({ name, url, logo }, index) => (
-

+
))}
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..707acb4073 100644
--- a/microsite/src/theme/customTheme.scss
+++ b/microsite/src/theme/customTheme.scss
@@ -7,6 +7,61 @@
--ifm-color-primary-darker: #2e9e8a;
--ifm-color-primary-darkest: #268271;
}
+
+html[data-theme='dark'] {
+ --ifm-grey-background: linear-gradient(
+ 90.49deg,
+ #121212 15.36%,
+ #282828 70.44%
+ );
+ --ifm-green-gradient-background: linear-gradient(
+ 70.44deg,
+ #121212 55%,
+ #5d817b
+ );
+ --bullet-line-color: linear-gradient(
+ 89.75deg,
+ #9bf0e1 -1.5%,
+ rgba(155, 240, 225, 0) 111.48%
+ );
+ --ifm-button-border-color: var(--ifm-color-primary-darker);
+
+ /* Logo */
+ --backstage-logo: url(/img/logo.svg);
+}
+
+html[data-theme='light'] {
+ --ifm-color-primary: var(--ifm-color-primary-darkest);
+ --ifm-grey-background: linear-gradient(
+ 90.49deg,
+ #e0e0e0 15.36%,
+ #f5f5f5 70.44%
+ );
+ --ifm-green-gradient-background: linear-gradient(
+ 70.44deg,
+ #e0f7f4 55%,
+ #a3d9d2
+ );
+ --ifm-breadcrumb-item-background-active: #f8f8f8;
+ --bullet-line-color: linear-gradient(
+ 89.75deg,
+ var(--ifm-color-primary-dark) -1.5%,
+ rgba(155, 240, 225, 0) 111.48%
+ );
+ --ifm-font-color-base: #000000;
+ --ifm-menu-color: #6E;
+ --feedback-button-dark-text-color: #f8f8f8;
+
+ /* Active Colors */
+ --ifm-breadcrumb-color-active: var(--ifm-color-primary-darkest);
+ --ifm-menu-color-active: var(--ifm-color-primary-darkest);
+ --ifm-link-color: var(--ifm-color-primary-darkest);
+ --ifm-link-color-hover: var(--ifm-color-primary-darkest);
+
+ /* Logo */
+ --backstage-logo: url(/img/logo-black.svg);
+}
+
// for docs and releases
#__docusaurus {
.theme-doc-markdown {
@@ -46,7 +101,7 @@
}
}
.footerLogo {
- background-image: url(/img/logo.svg);
+ background-image: var(--backstage-logo);
background-repeat: no-repeat;
height: 40px;
width: 180px;
@@ -86,11 +141,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/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
diff --git a/microsite/static/img/partner-logo-alauda-blk.png b/microsite/static/img/partner-logo-alauda-blk.png
new file mode 100644
index 0000000000..3d93eb1444
Binary files /dev/null and b/microsite/static/img/partner-logo-alauda-blk.png differ
diff --git a/microsite/static/img/partner-logo-frontside-blk.png b/microsite/static/img/partner-logo-frontside-blk.png
new file mode 100644
index 0000000000..16b14ac588
Binary files /dev/null and b/microsite/static/img/partner-logo-frontside-blk.png differ
diff --git a/microsite/static/img/partner-logo-liatrio-blk.png b/microsite/static/img/partner-logo-liatrio-blk.png
new file mode 100644
index 0000000000..a3b599c98c
Binary files /dev/null and b/microsite/static/img/partner-logo-liatrio-blk.png differ
diff --git a/microsite/static/img/partner-logo-redhat-blk.png b/microsite/static/img/partner-logo-redhat-blk.png
new file mode 100644
index 0000000000..8279127da9
Binary files /dev/null and b/microsite/static/img/partner-logo-redhat-blk.png differ
diff --git a/microsite/static/img/partner-logo-roadie-blk.png b/microsite/static/img/partner-logo-roadie-blk.png
new file mode 100644
index 0000000000..a837d3f6f5
Binary files /dev/null and b/microsite/static/img/partner-logo-roadie-blk.png differ
diff --git a/microsite/static/img/partner-logo-solo-blk.png b/microsite/static/img/partner-logo-solo-blk.png
new file mode 100644
index 0000000000..d9da222f22
Binary files /dev/null and b/microsite/static/img/partner-logo-solo-blk.png differ
diff --git a/microsite/static/img/partner-logo-statusneo-blk.png b/microsite/static/img/partner-logo-statusneo-blk.png
new file mode 100644
index 0000000000..78fb9bd10e
Binary files /dev/null and b/microsite/static/img/partner-logo-statusneo-blk.png differ
diff --git a/microsite/static/img/partner-logo-tanzubybroadcom-blk.png b/microsite/static/img/partner-logo-tanzubybroadcom-blk.png
new file mode 100644
index 0000000000..0b66842336
Binary files /dev/null and b/microsite/static/img/partner-logo-tanzubybroadcom-blk.png differ
diff --git a/microsite/static/img/partner-logo-thoughtworks-blk.png b/microsite/static/img/partner-logo-thoughtworks-blk.png
new file mode 100644
index 0000000000..a9a4894ccf
Binary files /dev/null and b/microsite/static/img/partner-logo-thoughtworks-blk.png differ