src/test/apps/ssr/pages/_app.tsx

import { useMemo } from "react";
import Head from "next/head";
import withDarkMode from "next-dark-mode";
import type { AppProps } from 'next/app'
import { useDarkMode } from "next-dark-mode";
import type { EmotionCache } from "@emotion/cache";
import createCache from "@emotion/cache";
import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
import { createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import { CacheProvider } from '@emotion/react';

let muiCache: EmotionCache | undefined = undefined;

export const createMuiCache = () => muiCache = createCache({ "key": "mui", "prepend": true });

export function App({ Component, pageProps }: AppProps) {

	const { darkModeActive } = useDarkMode();

	const theme = useMemo(
		() => createTheme({
			"palette": {
				"mode": darkModeActive ? "dark" : "light",
				"primary": {
					"main": "#32CD32" //Limegreen
				},
				"info": {
					"main": "#ffff00" //Yellow
				}
			},
			"typography": {
				"subtitle2": {
					"fontStyle": "italic"
				}
			},
			"components": {
				//@ts-ignore
				"TestingStyleOverrides": {
					"styleOverrides": {
						"lightBulb": ({ theme, ownerState: { isOn }, lightBulbBorderColor }: any)=>({
							"border": `1px solid ${lightBulbBorderColor}`,
							"backgroundColor": isOn ? theme.palette.info.main : "grey"
						})
					}
					
				}
			}
		}),
		[darkModeActive]
	);

	return (
		<>
			<Head>
				<title>Create Next App</title>
				<meta name="description" content="Generated by create next app" />
				<link rel="icon" href="/favicon.ico" />
			</Head>
			<CacheProvider value={muiCache ?? createMuiCache()}>
				<MuiThemeProvider theme={theme}>
					<CssBaseline />
					<Component {...pageProps} />
				</MuiThemeProvider>
			</CacheProvider>
		</>
	);

}

export default withDarkMode(App);