From 41b8332544365f94574505f3cd292ad53a90b0d3 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 27 May 2025 01:08:36 +0530 Subject: [PATCH 1/3] [docs][templates] Fix rendering of logos in dark mode --- .../components/LogoCollection.js | 21 ++++++++++++++----- .../components/LogoCollection.tsx | 21 ++++++++++++++----- 2 files changed, 32 insertions(+), 10 deletions(-) diff --git a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js index 96d1bffa50a0ec..bb3f5ace510ea5 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js @@ -2,9 +2,9 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Grid from '@mui/material/Grid'; -import { useTheme } from '@mui/system'; +import { useColorScheme } from '@mui/material/styles'; -const whiteLogos = [ +const darkModeLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg', @@ -13,7 +13,7 @@ const whiteLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg', ]; -const darkLogos = [ +const whiteModeLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg', @@ -30,8 +30,19 @@ const logoStyle = { }; export default function LogoCollection() { - const theme = useTheme(); - const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos; + const { mode, systemMode } = useColorScheme(); + let logos; + if (mode === 'system') { + if (systemMode === 'light') { + logos = whiteModeLogos; + } else { + logos = darkModeLogos; + } + } else if (mode === 'light') { + logos = whiteModeLogos; + } else { + logos = darkModeLogos; + } return ( diff --git a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx index 96d1bffa50a0ec..bb3f5ace510ea5 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Grid from '@mui/material/Grid'; -import { useTheme } from '@mui/system'; +import { useColorScheme } from '@mui/material/styles'; -const whiteLogos = [ +const darkModeLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg', @@ -13,7 +13,7 @@ const whiteLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg', ]; -const darkLogos = [ +const whiteModeLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg', @@ -30,8 +30,19 @@ const logoStyle = { }; export default function LogoCollection() { - const theme = useTheme(); - const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos; + const { mode, systemMode } = useColorScheme(); + let logos; + if (mode === 'system') { + if (systemMode === 'light') { + logos = whiteModeLogos; + } else { + logos = darkModeLogos; + } + } else if (mode === 'light') { + logos = whiteModeLogos; + } else { + logos = darkModeLogos; + } return ( From c8cccb7dcf96023364b89b783af98187b0a62093 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 27 May 2025 01:14:32 +0530 Subject: [PATCH 2/3] update names --- .../templates/marketing-page/components/LogoCollection.js | 6 +++--- .../templates/marketing-page/components/LogoCollection.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js index bb3f5ace510ea5..b551c12ca11001 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js @@ -13,7 +13,7 @@ const darkModeLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg', ]; -const whiteModeLogos = [ +const lightModeLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg', @@ -34,12 +34,12 @@ export default function LogoCollection() { let logos; if (mode === 'system') { if (systemMode === 'light') { - logos = whiteModeLogos; + logos = lightModeLogos; } else { logos = darkModeLogos; } } else if (mode === 'light') { - logos = whiteModeLogos; + logos = lightModeLogos; } else { logos = darkModeLogos; } diff --git a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx index bb3f5ace510ea5..b551c12ca11001 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx @@ -13,7 +13,7 @@ const darkModeLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg', ]; -const whiteModeLogos = [ +const lightModeLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg', @@ -34,12 +34,12 @@ export default function LogoCollection() { let logos; if (mode === 'system') { if (systemMode === 'light') { - logos = whiteModeLogos; + logos = lightModeLogos; } else { logos = darkModeLogos; } } else if (mode === 'light') { - logos = whiteModeLogos; + logos = lightModeLogos; } else { logos = darkModeLogos; } From 8f33fe05888360034cfc6c57dcd2d41715822311 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 27 May 2025 10:50:13 +0530 Subject: [PATCH 3/3] fix testimonials --- .../marketing-page/components/Testimonials.js | 22 ++++++++++++++----- .../components/Testimonials.tsx | 22 ++++++++++++++----- 2 files changed, 34 insertions(+), 10 deletions(-) diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js index a236c9aab6ae38..cef5cd74c7b6a3 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js @@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; -import { useTheme } from '@mui/system'; +import { useColorScheme } from '@mui/material/styles'; const userTestimonials = [ { @@ -54,7 +54,7 @@ const userTestimonials = [ }, ]; -const whiteLogos = [ +const darkModeLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg', @@ -63,7 +63,7 @@ const whiteLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg', ]; -const darkLogos = [ +const lightModeLogos = [ 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg', 'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg', @@ -78,8 +78,20 @@ const logoStyle = { }; export default function Testimonials() { - const theme = useTheme(); - const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos; + const { mode, systemMode } = useColorScheme(); + + let logos; + if (mode === 'system') { + if (systemMode === 'light') { + logos = lightModeLogos; + } else { + logos = darkModeLogos; + } + } else if (mode === 'light') { + logos = lightModeLogos; + } else { + logos = darkModeLogos; + } return (