[material-ui][docs] Fix color mode toggle of the landing page template (

#41293)
mui · Feb 27, 2024 · 7faab11 · 7faab11
1 parent a7fb2a1
commit 7faab11
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 28 deletions.
diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
@@ -19,8 +19,6 @@ import FAQ from './components/FAQ';
 import Footer from './components/Footer';
 import getLPTheme from './getLPTheme';
 
-const defaultTheme = createTheme({});
-
 function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
   return (
     <Box
@@ -67,6 +65,7 @@ export default function LandingPage() {
   const [mode, setMode] = React.useState('dark');
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
   const LPtheme = createTheme(getLPTheme(mode));
+  const defaultTheme = createTheme({ palette: { mode } });
 
   const toggleColorMode = () => {
     setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));

diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
@@ -18,8 +18,6 @@ import FAQ from './components/FAQ';
 import Footer from './components/Footer';
 import getLPTheme from './getLPTheme';
 
-const defaultTheme = createTheme({});
-
 interface ToggleCustomThemeProps {
   showCustomTheme: Boolean;
   toggleCustomTheme: () => void;
@@ -67,6 +65,7 @@ export default function LandingPage() {
   const [mode, setMode] = React.useState<PaletteMode>('dark');
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
   const LPtheme = createTheme(getLPTheme(mode));
+  const defaultTheme = createTheme({ palette: { mode } });
 
   const toggleColorMode = () => {
     setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.js b/docs/data/material/getting-started/templates/landing-page/components/Features.js
@@ -150,6 +150,7 @@ export default function Features() {
             {items.map(({ icon, title, description }, index) => (
               <Card
                 key={index}
+                variant="outlined"
                 component={Button}
                 onClick={() => handleItemClick(index)}
                 sx={{
@@ -195,7 +196,7 @@ export default function Features() {
                   >
                     {icon}
                   </Box>
-                  <div>
+                  <Box sx={{ textTransform: 'none' }}>
                     <Typography
                       color="text.primary"
                       variant="body2"
@@ -230,7 +231,7 @@ export default function Features() {
                         sx={{ mt: '1px', ml: '2px' }}
                       />
                     </Link>
-                  </div>
+                  </Box>
                 </Box>
               </Card>
             ))}

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx
@@ -150,6 +150,7 @@ export default function Features() {
             {items.map(({ icon, title, description }, index) => (
               <Card
                 key={index}
+                variant="outlined"
                 component={Button}
                 onClick={() => handleItemClick(index)}
                 sx={{
@@ -195,7 +196,7 @@ export default function Features() {
                   >
                     {icon}
                   </Box>
-                  <div>
+                  <Box sx={{ textTransform: 'none' }}>
                     <Typography
                       color="text.primary"
                       variant="body2"
@@ -230,7 +231,7 @@ export default function Features() {
                         sx={{ mt: '1px', ml: '2px' }}
                       />
                     </Link>
-                  </div>
+                  </Box>
                 </Box>
               </Card>
             ))}

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.js b/docs/data/material/getting-started/templates/landing-page/components/Hero.js
@@ -17,7 +17,7 @@ export default function Hero() {
         backgroundImage:
           theme.palette.mode === 'light'
             ? 'linear-gradient(180deg, #CEE5FD, #FFF)'
-            : 'linear-gradient(#02294F, #090E10)',
+            : `linear-gradient(#02294F, ${alpha('#090E10', 0.0)})`,
         backgroundSize: '100% 20%',
         backgroundRepeat: 'no-repeat',
       })}

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx
@@ -17,7 +17,7 @@ export default function Hero() {
         backgroundImage:
           theme.palette.mode === 'light'
             ? 'linear-gradient(180deg, #CEE5FD, #FFF)'
-            : 'linear-gradient(#02294F, #090E10)',
+            : `linear-gradient(#02294F, ${alpha('#090E10', 0.0)})`,
         backgroundSize: '100% 20%',
         backgroundRepeat: 'no-repeat',
       })}

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Pricing.js b/docs/data/material/getting-started/templates/landing-page/components/Pricing.js
@@ -115,8 +115,7 @@ export default function Pricing() {
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                    color:
-                      tier.title === 'Professional' ? 'primary.contrastText' : '',
+                    color: tier.title === 'Professional' ? 'grey.100' : '',
                   }}
                 >
                   <Typography component="h3" variant="h6">
@@ -145,10 +144,7 @@ export default function Pricing() {
                   sx={{
                     display: 'flex',
                     alignItems: 'baseline',
-                    color:
-                      tier.title === 'Professional'
-                        ? 'primary.contrastText'
-                        : undefined,
+                    color: tier.title === 'Professional' ? 'grey.50' : undefined,
                   }}
                 >
                   <Typography component="h3" variant="h2">
@@ -189,9 +185,7 @@ export default function Pricing() {
                       variant="subtitle2"
                       sx={{
                         color:
-                          tier.title === 'Professional'
-                            ? 'primary.contrastText'
-                            : undefined,
+                          tier.title === 'Professional' ? 'grey.200' : undefined,
                       }}
                     >
                       {line}

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx b/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx
@@ -115,8 +115,7 @@ export default function Pricing() {
                     display: 'flex',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                    color:
-                      tier.title === 'Professional' ? 'primary.contrastText' : '',
+                    color: tier.title === 'Professional' ? 'grey.100' : '',
                   }}
                 >
                   <Typography component="h3" variant="h6">
@@ -145,10 +144,7 @@ export default function Pricing() {
                   sx={{
                     display: 'flex',
                     alignItems: 'baseline',
-                    color:
-                      tier.title === 'Professional'
-                        ? 'primary.contrastText'
-                        : undefined,
+                    color: tier.title === 'Professional' ? 'grey.50' : undefined,
                   }}
                 >
                   <Typography component="h3" variant="h2">
@@ -189,9 +185,7 @@ export default function Pricing() {
                       variant="subtitle2"
                       sx={{
                         color:
-                          tier.title === 'Professional'
-                            ? 'primary.contrastText'
-                            : undefined,
+                          tier.title === 'Professional' ? 'grey.200' : undefined,
                       }}
                     >
                       {line}