Switch to new CSS variables (#554)

src/components/Plotly.tsx

@@ -18,7 +18,7 @@ const defaultOverride = (theme: Theme): Partial<PlotParams> => ({
 	layout: {
 		paper_bgcolor: 'transparent',
 		plot_bgcolor: 'transparent',
-		font: { color: theme.palette.text.primary },
+		font: { color: theme.vars.palette.text.primary },
 		xaxis: { automargin: true },
 		yaxis: { automargin: true },
 		margin: {

src/components/routes/App/index.tsx

@@ -17,7 +17,6 @@ import {
 	createTheme,
 	responsiveFontSizes,
 } from '@mui/material/styles'
-import useMediaQuery from '@mui/material/useMediaQuery'
 
 import Blog from '../Blog'
 import Code from '../Code'
@@ -56,20 +55,23 @@ const hSizes = Object.fromEntries(
 )
 
 const App = () => {
-	const dark = useMediaQuery('(prefers-color-scheme: dark)')
 	const theme = useMemo(() => {
 		const baseTheme = createTheme({
+			cssVariables: true,
 			typography: {
 				fontFamily: '"Iosevka Aile", sans-serif',
 				...hSizes,
 			},
+			colorSchemes: {
+				light: true,
+				dark: true,
+			},
 			palette: {
-				mode: dark ? 'dark' : 'light',
 				primary: deepPurple,
 			},
 		})
 		return responsiveFontSizes(baseTheme)
-	}, [dark])
+	}, [])
 	const currentTab = useRouteMatch(ROUTE_LINKS.map(({ pattern }) => pattern))
 		?.pattern.path
 

src/main.tsx

@@ -1,6 +1,7 @@
 /// <reference types="vite/client" />
 /// <reference types="@total-typescript/ts-reset" />
 /// <reference types="unplugin-fonts/client" />
+/// <reference types="@mui/material/themeCssVarsAugmentation" />
 
 import 'unfonts.css'
 import './main.css'