Merge pull request #29940 from RBC/microsite-light-mode

feat: Update Docusaurus configuration and theme styles to support Light Theme

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: [
         {

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,

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) => (
               <div key={index}>
                 <Link to={url}>
-                  <img src={`${siteConfig.baseUrl}${logo}`} alt={name} />
+                  <ThemedImage
+                    alt={name}
+                    sources={{
+                      light: useBaseUrl(`${siteConfig.baseUrl}${logo}-blk.png`),
+                      dark: useBaseUrl(`${siteConfig.baseUrl}${logo}.png`),
+                    }}
+                  />
                 </Link>
               </div>
             ))}

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
             </h2>
 
-            <img
-              src={`${siteConfig.baseUrl}img/cncf-white.svg`}
+            <ThemedImage
               alt="CNCF Logo"
               height="100px"
+              sources={{
+                light: useBaseUrl(`${siteConfig.baseUrl}img/cncf-color.svg`),
+                dark: useBaseUrl(`${siteConfig.baseUrl}img/cncf-white.svg`),
+              }}
             />
           </div>
         </BannerSection>

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 */