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

- Updated color mode settings to respect user preferences and changed default mode.
- Switched logo source based on theme (light/dark) in the home page component.
- Enhanced banner section styles with CSS variables for better theme support.
- Copied logo asset for dark theme.
- Introduced CSS variables for light and dark theme backgrounds and gradients.

Signed-off-by: Gervais, Raymond <raymond.gervais@rbc.com>

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,
+            },
+          ]
           : []),
       ],
     },

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

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

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);
+}