Merge pull request #39 from PelicanPlatform/fix-dark-mode

Doc Updates

Author: CannonLock

components/DownloadsComponent.tsx

@@ -5,7 +5,6 @@ import fetchFilteredReleases from "../utils/fetchReleases";
 import { FilteredRelease, ArchEnums, OSEnums, SemverRegex } from '../utils/types';
 import {OperatingSystems, Architectures, Versions} from './Filters';
 import ReleasesTable from './ReleasesTable';
-import { DarkLightContainer } from '@/utils/darkLightContainer';
 import { useTheme } from '@mui/material/styles';
 import { parseEnum } from '@/utils/utils';
 
@@ -162,7 +161,6 @@ const DownloadsComponent: React.FC = () => {
     };
 
     return (
-        <DarkLightContainer>
         <Box sx={{
             display: 'flex',
             flexDirection: 'column',
@@ -173,7 +171,6 @@ const DownloadsComponent: React.FC = () => {
         }}>
             {renderContent()}
         </Box>
-        </DarkLightContainer>
     );
 };
 

components/ParameterBox.tsx

@@ -12,7 +12,6 @@ export const ParameterBox: React.FC<{ parameter: ParameterDetail }> = ({ paramet
 	const groupName = parts.length > 1 ? parts.slice(0, -1).join('.') : null;
 	const parameterName = parts.length > 1 ? parts[parts.length - 1] : parameter.name;
 	const parameterId = parameter.name.replace(".", "-")
-	const theme = useTheme();
 
 	return (
 	  <Box
@@ -55,7 +54,7 @@ export const ParameterBox: React.FC<{ parameter: ParameterDetail }> = ({ paramet
 				<Box p={1} sx={{
 					borderRadius: "0.5em",
 					marginTop: "0.5em",
-					backgroundColor: theme.palette.mode === "light" ? "#e7e7e7" : "#666666"
+					backdropFilter: "contrast(1)"
 				}}>
 					{parameter.components && (
 							<Typography variant="body2">

components/Parameters.tsx

@@ -6,7 +6,6 @@ import { ParametersArray, ParameterDetail } from "../utils/types";
 import { ParameterBox } from "./ParameterBox";
 import { ParameterChips } from './ParameterChips';
 import { Link } from "@mui/icons-material";
-import { DarkLightContainer } from '@/utils/darkLightContainer';
 
 const Parameters: React.FC<{ parameters: ParametersArray }> = ({ parameters }) => {
 	const [searchValue, setSearchValue] = useState('');
@@ -40,7 +39,7 @@ const Parameters: React.FC<{ parameters: ParametersArray }> = ({ parameters }) =
 	  	return groups;
 	}, [filteredParameters]);
 	return (
-		<DarkLightContainer>
+		<>
 	  	<Box>
 			<Autocomplete
 			disablePortal
@@ -99,15 +98,15 @@ const Parameters: React.FC<{ parameters: ParametersArray }> = ({ parameters }) =
 				<Divider sx={{ height: "0.5em", backgroundColor: "#0885ff", width: "100%", borderRadius: "0.5em" }} />
 				)}
 				{groupParams.map((param, index) => (
-				<ParameterBox key={index} parameter={param} />
+				<ParameterBox key={param.name} parameter={param} />
 				))}
 			</Box>
 			))}
 			{filteredParameters.length === 0 && (searchValue || selectedComponent) ? (
 			<Typography variant="h5">No results found</Typography>
 			) : null}
 	  	</Box>
-		</DarkLightContainer>
+		</>
 	);
   };
 

components/ThemeProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React, { useEffect } from 'react'
+import { useTheme } from 'next-themes'
+import { ThemeProvider as MuiThemeProvider, createTheme, useColorScheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+
+const muiTheme = createTheme({
+	colorSchemes: {
+		dark: true,
+	},
+});
+
+const MaterialThemeProvider = ({ children }: { children: React.ReactNode }) => {
+	return (
+
+		<MuiThemeProvider theme={muiTheme}>
+			<>
+				<CssBaseline />
+				{children}
+			</>
+		</MuiThemeProvider>
+	)
+}
+
+const ThemeUnifier = ({ children }: { children: React.ReactNode }) => {
+
+	const { theme } = useTheme();
+	const { mode, setMode } = useColorScheme();
+
+	// Sync MUI mode with Nextra theme
+	useEffect(() => {
+		if(theme !== mode){
+			setMode(theme as 'light' | 'dark' | 'system');
+		}
+	}, [theme, mode]);
+
+	return (
+		<>
+			{children}
+		</>
+	)
+}
+
+const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+	return (
+		<MaterialThemeProvider>
+			<ThemeUnifier>
+				{children}
+			</ThemeUnifier>
+		</MaterialThemeProvider>
+	)
+}
+
+
+export default ThemeProvider;

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.