MUI palette --> colorSchemes upgrade

UTDNebula · Nov 25, 2024 · 8299411 · 8299411
1 parent 4fb20ee
commit 8299411
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,6 +1,5 @@
 import '@/styles/globals.css';
 
-import { useMediaQuery } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { GoogleAnalytics } from '@next/third-parties/google';
 import { SpeedInsights } from '@vercel/speed-insights/react';
@@ -76,10 +75,8 @@ const kallisto = localFont({
 });
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const muiTheme = createTheme({
+  const palette = {
     palette: {
-      mode: prefersDarkMode ? 'dark' : 'light',
       //copied from tailwind.config.js
       primary: {
         main: tailwindConfig.theme.extend.colors.royal,
@@ -92,6 +89,13 @@ function MyApp({ Component, pageProps }: AppProps) {
         main: tailwindConfig.theme.extend.colors.persimmon['500'],
       },
     },
+  };
+  const muiTheme = createTheme({
+    cssVariables: true,
+    colorSchemes: {
+      light: palette,
+      dark: palette,
+    },
     typography: {
       fontFamily: 'inherit',
     },