From e01b9cadbed56a8a4f7120ea12e0b519eaeacd19 Mon Sep 17 00:00:00 2001 From: "Gervais, Raymond" Date: Tue, 6 May 2025 12:12:48 -0400 Subject: [PATCH] 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 --- microsite/docusaurus.config.ts | 49 ++++++++++--------- .../bannerSection/bannerSection.module.scss | 5 +- microsite/src/pages/home/_home.tsx | 10 ++-- microsite/src/theme/customTheme.scss | 15 +++--- microsite/src/theme/variables.scss | 18 +++++++ microsite/static/img/logo-black.svg | 1 + 6 files changed, 62 insertions(+), 36 deletions(-) create mode 100644 microsite/static/img/logo-black.svg 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 - CNCF Logo 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 @@ +05 Logo_Black \ No newline at end of file