feat: migrate to mui v6

package.json

@@ -55,14 +55,12 @@
     "wxt": "^0.19.4"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.0",
-    "@emotion/styled": "^11.13.0",
     "@generouted/react-router": "^1.19.6",
     "@iconify-json/fa6-solid": "^1.1.24",
     "@lingui/core": "^4.11.3",
     "@lingui/macro": "^4.11.3",
     "@lingui/react": "^4.11.3",
-    "@mui/material": "^5.16.7",
+    "@mui/material": "next",
     "@reduxjs/toolkit": "^2.2.7",
     "classnames": "^2.5.1",
     "compare-versions": "^6.1.1",

src/about.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import classNames from 'classnames';
-import { CssBaseline, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material';
+import { CssBaseline, CssVarsProvider } from '@mui/material';
 import { I18nProvider } from '@lingui/react';
 import { i18n } from '@lingui/core';
 
@@ -12,7 +12,7 @@ import About from './pages/doc/about';
 
 const root = createRoot(document.querySelector('#main')!);
 root.render(
-  <CssVarsProvider defaultMode="system" theme={theme}>
+  <CssVarsProvider theme={theme}>
     <CssBaseline />
     <I18nProvider i18n={i18n}>
       <main className={classNames(styles.wrapper, styles.doc_wrapper)} style={{ height: '100vh' }}>

src/css/doc.module.css

@@ -5,7 +5,7 @@
   background: url('../image/creampaper.png');
 }
 
-[data-mui-color-scheme='dark'] .wrapper {
+[data-dark] .wrapper {
   background: url('../image/creampaper_black.png');
 }
 
@@ -37,14 +37,14 @@
 .welcome_banner_light {
   display: inherit;
 }
-[data-mui-color-scheme='dark'] .welcome_banner_light {
+[data-dark] .welcome_banner_light {
   display: none;
 }
 
 .welcome_banner_dark {
   display: none;
 }
-[data-mui-color-scheme='dark'] .welcome_banner_dark {
+[data-dark] .welcome_banner_dark {
   display: inherit;
 }
 
@@ -110,7 +110,7 @@
   box-shadow: 0px 0px 2px #aaa;
 }
 
-[data-mui-color-scheme='dark'] .doc {
+[data-dark] .doc {
   background: #070700;
   border-color: #666;
   box-shadow: 0px 0px 2px #555;
@@ -163,7 +163,7 @@
   color: #333;
 }
 
-[data-mui-color-scheme='dark'] .doc_image_block h2 {
+[data-dark] .doc_image_block h2 {
   color: #ccc;
 }
 

src/css/main.module.css

@@ -52,7 +52,7 @@
   background: #f6f6f6;
 }
 
-[data-mui-color-scheme='dark'] .sidebar_cards {
+[data-dark] .sidebar_cards {
   background: #0a0a0a;
 }
 
@@ -146,7 +146,7 @@
   background-color: #eee;
 }
 
-[data-mui-color-scheme='dark'] .pane_content {
+[data-dark] .pane_content {
   background-color: #111;
 }
 

src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { CssBaseline, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material';
+import { CssBaseline, CssVarsProvider } from '@mui/material';
 import { SnackbarProvider } from 'notistack';
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
@@ -20,7 +20,7 @@ const root = createRoot(document.querySelector('#main')!);
 root.render(
   <StrictMode>
     <Provider store={store}>
-      <CssVarsProvider defaultMode="system" theme={theme}>
+      <CssVarsProvider theme={theme}>
         <CssBaseline />
         <SnackbarProvider
           anchorOrigin={{

src/theme.ts

@@ -1,3 +1,6 @@
-import { experimental_extendTheme as extendTheme } from '@mui/material';
+import { extendTheme } from '@mui/material';
 
-export const theme = extendTheme({});
+export const theme = extendTheme({
+  colorSchemes: { light: true, dark: true },
+  colorSchemeSelector: 'data',
+});

src/vite-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="unplugin-icons/types/react" />
+/// <reference types="@mui/material/themeCssVarsAugmentation" />
 
 declare const __HELPER_VERSION__: string;
 declare const __GIT_VERSION__: string;