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) => (
- {name} +
))} 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 - CNCF Logo 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 @@ +05 Logo_Black \ 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