added light/dark mode toggle

kimsauce · kimsauce · commit 540caf05f06d · 2025-01-08T00:06:24.000-08:00
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mdx-js/node-loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
+    "@mui/icons-material": "^6.3.1",
     "@mui/lab": "^5.0.0-alpha.108",
     "@mui/material": "^5.16.7",
     "@mui/system": "^5.16.7",
diff --git a/src/css/sumo.scss b/src/css/sumo.scss
@@ -227,12 +227,7 @@ html[data-theme='light'] {
   min-width: 100px;
 }
 
-/* Berry CSS override to force global styles back to normal */
-body, .MuiTypography-root, button, input, select, textarea {
-  font-family: 'Lab Grotesque', sans-serif !important;
-}
-
-/* Berry chatbot */
+/* Berry chatbot inline height */
 #inline-berry-chatbot-container iframe {
   height: 600px !important;
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,7 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import Layout from '@theme/Layout';
-import { Box, Button, Container, Grid, Stack, Tab, Tabs, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  Container,
+  Grid,
+  Stack,
+  Tab,
+  Tabs,
+  Typography,
+  Switch
+} from '@mui/material';
 import { TabContext, TabPanel } from '@mui/lab';
+import { LightMode, DarkMode } from '@mui/icons-material'; // <-- Icons
 import bgImage from '../../static/img/hero-secondary-background.webp';
 import heroImage from '../../static/img/hero-secondary-graphic.webp';
 import SumoLogicDocsLogo from '../../static/img/sumo-logic-docs.svg';
@@ -12,6 +23,9 @@ import ErrorBoundary from '../components/ErrorBoundary';
 export const Home = () => {
   const [tab, setTab] = useState('0');
 
+  // Track whether we're in dark mode:
+  const [isDark, setIsDark] = useState(false);
+
   const questions = [
     '✨ timestamps',
     '✨ how do you write a log search query?',
@@ -41,13 +55,16 @@ export const Home = () => {
           botUrlPath: 'nova',
           showNewChat: true,
           parentElementId: 'inline-berry-chatbot-container',
+          // If you want to start in dark mode by default, uncomment:
+          // colorMode: 'dark',
         });
       };
 
       script.onerror = () => console.error('Failed to load Berry widget script');
     }
   }, []);
 
+  // Send a question to Berry:
   const handleQuestionClick = (question) => {
     if (window.Berry) {
       if (window.Berry.sendMessage) {
@@ -59,68 +76,125 @@ export const Home = () => {
     }
   };
 
+  // Toggle Berry's theme on switch change:
+  const handleToggle = (event) => {
+    const newValue = event.target.checked; // true = dark mode, false = light mode
+    setIsDark(newValue);
+
+    if (window.Berry && window.Berry.update) {
+      window.Berry.update({
+        colorMode: newValue ? 'dark' : 'light'
+      });
+    }
+  };
+
   return (
     <ErrorBoundary>
       <Layout
         description='Sumo Logic docs - real-time alerting, security, dashboards, and machine-learning-powered analytics for all three types of telemetry — logs, metrics, and traces.'
         title='Home'
       >
-
-
         {/* Suggested Questions */}
         <Box sx={{ width: '100%', background: '#2a2a2a', color: '#fff', py: 4 }}>
-
           <Container maxWidth="md" sx={{ textAlign: 'center' }}>
-          <Typography variant="h4" fontWeight={600} mt={1} mb={3}>
-            Sumo Logic Documentation
-          </Typography>
-            <Typography variant="h5" fontFamily="Lab Grotesque" fontWeight={300} mb={2} sx={{ background: 'linear-gradient(90deg, #9900ED, #C04CF4, #00C8E0)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+            <Box
+              component={SumoLogicDocsLogo}
+              alt="Sumo Logic Docs logo"
+              role="<img>"
+              aria-hidden="true"
+              height={{
+                md: 30,
+                xs: 22,
+              }}
+              width='100%'
+            />
+            <Typography
+              fontFamily="Lab Grotesque"
+              variant='h3'
+              fontSize={32}
+              fontWeight={700}
+              mt={2}
+              mb={2}
+              sx={{
+                background: 'linear-gradient(90deg, #9900ED, #C04CF4, #00C8E0)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent'
+              }}
+            >
               Our Docs Assistant is here to help!
             </Typography>
-            <Typography fontFamily="Lab Grotesque" fontSize={13} fontWeight={300} mb={2}>
+            <Typography
+              fontFamily="Lab Grotesque"
+              fontSize={13}
+              fontWeight={300}
+              mb={2}
+            >
               Ask me anything! You can type full questions, sentences, or just keywords, and I'll help you find the information you need. Try these to get started:
             </Typography>
             <Stack
-            direction="row"
-            spacing={1} // Reduced horizontal spacing between buttons
-            justifyContent="center"
-            flexWrap="wrap"
-            rowGap={1} // Reduced vertical spacing between rows
+              direction="row"
+              spacing={1}
+              justifyContent="center"
+              flexWrap="wrap"
+              rowGap={1}
             >
-
-    {questions.map((question, index) => (
-      <Button
-        key={index}
-        onClick={() => handleQuestionClick(question)}
-        variant="outlined"
-        sx={{
-          bgcolor: 'transparent',
-          color: '#DDDDDD',
-          fontFamily: 'Lab Grotesque',
-          borderColor: '#808080',
-          borderRadius: '5px',
-          textTransform: 'lowercase',
-          fontSize: '12px',
-          fontWeight: '300',
-          padding: '4px 6px',
-          minWidth: 'auto',
-          '&:hover': {
-            bgcolor: '#2a2a2a',
-            color: '#DDDDDD',
-          },
-        }}
-      >
-        {question}
-      </Button>
-    ))}
-  </Stack>
+              {questions.map((question, index) => (
+                <Button
+                  key={index}
+                  onClick={() => handleQuestionClick(question)}
+                  variant="outlined"
+                  sx={{
+                    bgcolor: 'transparent',
+                    color: '#DDDDDD',
+                    fontFamily: 'Lab Grotesque',
+                    borderColor: '#808080',
+                    borderRadius: '5px',
+                    textTransform: 'lowercase',
+                    fontSize: '12px',
+                    fontWeight: '300',
+                    padding: '4px 6px',
+                    minWidth: 'auto',
+                    '&:hover': {
+                      bgcolor: '#2a2a2a',
+                      color: '#DDDDDD',
+                    },
+                  }}
+                >
+                  {question}
+                </Button>
+              ))}
+            </Stack>
 
             {/* Inline Chatbot Container */}
-            <Box id="inline-berry-chatbot-container" sx={{ my: 4, p: 2, margin: '0 auto', textAlign: 'center' }}>
-            {/* The chatbot will render here */}
+            <Box
+              id="inline-berry-chatbot-container"
+              sx={{ my: 4, p: 2, margin: '0 auto', textAlign: 'center' }}
+            >
+              {/* Berry chatbot will render here */}
             </Box>
+
+            {/* Light/Dark Toggle Switch with icons */}
+            <Stack direction="row" spacing={1} alignItems="center" justifyContent="center">
+              {/* Label: Light */}
+              <Typography variant="body2" color="#fff">
+                Light
+              </Typography>
+              <Switch
+                checked={isDark}
+                onChange={handleToggle}
+                color="default"
+                // Sun icon when off (light), moon icon when on (dark)
+                icon={<LightMode />}      // Unchecked icon
+                checkedIcon={<DarkMode />} // Checked icon
+              />
+              {/* Label: Dark */}
+              <Typography variant="body2" color="#fff">
+                Dark
+              </Typography>
+            </Stack>
           </Container>
         </Box>
+
         {/* Hero */}
         <Stack
           sx={{
@@ -158,10 +232,7 @@ export const Home = () => {
               }}
               height='100%'
             >
-              <Grid
-                item
-                md={6}
-              >
+              <Grid item md={6}>
                 <Stack
                   alignItems={{
                     md: 'flex-start',
@@ -258,7 +329,6 @@ export const Home = () => {
 
         {/* Main */}
         <Container maxWidth='xl'>
-
           {/* Product Guides */}
           <Stack
             alignItems='center'
@@ -335,7 +405,7 @@ export const Home = () => {
                   {
                     label: 'Other Solutions',
                   },
-                ].map(({ label, ...rest }, index) => (
+                ].map(({ label }, index) => (
                   <Tab
                     key={label}
                     label={label}
@@ -345,40 +415,40 @@ export const Home = () => {
                       fontWeight: 'bold',
                     }}
                     value={String(index)}
-                    {...rest}
                   />
                 ))}
               </Tabs>
-              {features.map((feature, index) => tab === String(index) && (
-                <Grid
-                  component={TabPanel}
-                  container
-                  direction='row'
-                  justifyContent='center'
-                  key={index}
-                  py={6}
-                  spacing={4}
-                  value={String(index)}
-                >
-                  {feature.map((config) => (
-                    <Grid
-                      item
-                      key={config.link}
-                      lg={4}
-                      md={6}
-                      xs={12}
-                    >
-                      <Feature
-                        length={feature.length}
-                        {...config}
-                      />
-                    </Grid>
-                  ))}
-                </Grid>
+              {features.map((feature, index) => (
+                tab === String(index) && (
+                  <Grid
+                    component={TabPanel}
+                    container
+                    direction='row'
+                    justifyContent='center'
+                    key={index}
+                    py={6}
+                    spacing={4}
+                    value={String(index)}
+                  >
+                    {feature.map((config) => (
+                      <Grid
+                        item
+                        key={config.link}
+                        lg={4}
+                        md={6}
+                        xs={12}
+                      >
+                        <Feature
+                          length={feature.length}
+                          {...config}
+                        />
+                      </Grid>
+                    ))}
+                  </Grid>
+                )
               ))}
             </TabContext>
           </Stack>
-
         </Container>
       </Layout>
     </ErrorBoundary>
diff --git a/yarn.lock b/yarn.lock
@@ -1038,7 +1038,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.25.9", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.25.9", "@babel/runtime@^7.26.0", "@babel/runtime@^7.8.4":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
   integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
@@ -2370,6 +2370,13 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz#182a325a520f7ebd75de051fceabfc0314cfd004"
   integrity sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==
 
+"@mui/icons-material@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-6.3.1.tgz#f28b5ecc3a4d8e8be389f9e9e5738759c7a98240"
+  integrity sha512-nJmWj1PBlwS3t1PnoqcixIsftE+7xrW3Su7f0yrjPw4tVjYrgkhU0hrRp+OlURfZ3ptdSkoBkalee9Bhf1Erfw==
+  dependencies:
+    "@babel/runtime" "^7.26.0"
+
 "@mui/lab@^5.0.0-alpha.108":
   version "5.0.0-alpha.170"
   resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.170.tgz#4519dfc8d1c51ca54fb9d8b91b95a3733d07be16"

Original file line number	Diff line number	Diff line change
`@@ -227,12 +227,7 @@ html[data-theme='light'] {`
`227`	`227`	`min-width: 100px;`
`228`	`228`	`}`
`229`	`229`
`230`		`-/* Berry CSS override to force global styles back to normal */`
`231`		`-body, .MuiTypography-root, button, input, select, textarea {`
`232`		`- font-family: 'Lab Grotesque', sans-serif !important;`
`233`		`-}`
`234`		`-`
`235`		`-/* Berry chatbot */`
	`230`	`+/* Berry chatbot inline height */`
`236`	`231`	`#inline-berry-chatbot-container iframe {`
`237`	`232`	`height: 600px !important;`
`238`	`233`	`}`