apply dark mode to material ui theme

src/components/Playground.tsx

@@ -1,11 +1,6 @@
 import { useEffect, useState } from "react";
 import { useMonaco, type Monaco } from "@monaco-editor/react";
 import { useImmer, type Updater } from "use-immer";
-
-import "@styles/playground.scss";
-
-import mainFileContent from "@assets/playground/main.shu?raw";
-import packTomlContent from "@assets/playground/pack.toml?raw";
 import FileView from "./playground/FileView";
 import Editor from "./playground/Editor";
 import Header from "./playground/Header";
@@ -15,6 +10,13 @@ import initWasm, {
     compileZip,
 } from "@wasm/webcompiler/pkg/webcompiler";
 import type { Directory, File, PlaygroundLang } from "@utils/playground";
+import { customTheme } from "@utils/material-ui-theme";
+
+import "@styles/playground.scss";
+
+import mainFileContent from "@assets/playground/main.shu?raw";
+import packTomlContent from "@assets/playground/pack.toml?raw";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 
 const FILE_STORAGE_KEY = "playground-files";
 const DEFAULT_FILES = {
@@ -156,7 +158,7 @@ export default function Playground({ lang }: { lang: PlaygroundLang }) {
     });
 
     return (
-        <>
+        <ThemeProvider theme={customTheme(theme)}>
             <main
                 className="playground not-content"
                 style={{
@@ -222,7 +224,7 @@ export default function Playground({ lang }: { lang: PlaygroundLang }) {
                     theme={theme}
                 />
             </main>
-        </>
+        </ThemeProvider>
     );
 }
 
@@ -360,7 +362,7 @@ function getStorageOrDefault(key: string, def: any) {
     }
 }
 
-function jsonReplacer(key: any, value: any): any {
+function jsonReplacer(_key: any, value: any): any {
     if (value instanceof Map) {
         const res: { [key: string]: any } = {};
         for (const [k, v] of value.entries()) {
@@ -422,7 +424,7 @@ function deleteDir(monaco: Monaco, updater: Updater<Directory>, path: string) {
 
         delete current.dirs[last];
     }
-    
+
     updater((dir) => {
         let current = dir;
         for (const part of parts) {

src/components/playground/DropdownButton.tsx

@@ -8,9 +8,6 @@ import Paper from "@mui/material/Paper";
 import Popper from "@mui/material/Popper";
 import MenuItem from "@mui/material/MenuItem";
 import MenuList from "@mui/material/MenuList";
-import { ThemeProvider } from "@mui/material";
-
-import { customTheme } from "@utils/material-ui-theme";
 
 export default function DropdownButton({
     options,
@@ -48,7 +45,7 @@ export default function DropdownButton({
     };
 
     return (
-        <ThemeProvider theme={customTheme}>
+        <>
             <ButtonGroup
                 variant="contained"
                 ref={anchorRef}
@@ -56,7 +53,11 @@ export default function DropdownButton({
                 style={style}
             >
                 {visible.map(([children, onClick], index) => {
-                    return <Button key={index} onClick={onClick}>{children}</Button>;
+                    return (
+                        <Button key={index} onClick={onClick}>
+                            {children}
+                        </Button>
+                    );
                 })}
                 <Button
                     size="small"
@@ -111,6 +112,6 @@ export default function DropdownButton({
                     </Grow>
                 )}
             </Popper>
-        </ThemeProvider>
+        </>
     );
 }

src/components/playground/FileView/AddFileDialog.tsx

@@ -1,12 +1,10 @@
-import {
+import Button from "@mui/material/Button";
-    Button,
+import Dialog from "@mui/material/Dialog";
-    Dialog,
+import DialogActions from "@mui/material/DialogActions";
-    DialogActions,
+import DialogContent from "@mui/material/DialogContent";
-    DialogContent,
+import DialogContentText from "@mui/material/DialogContentText";
-    DialogContentText,
+import DialogTitle from "@mui/material/DialogTitle";
-    DialogTitle,
+import TextField from "@mui/material/TextField";
-    TextField,
-} from "@mui/material";
 import type { PlaygroundExplorerLang } from "@utils/playground";
 
 export default function AddFileDialog({

src/components/playground/FileView/DirElement.tsx

@@ -9,10 +9,8 @@ import {
     GoChevronRight as ChevRight,
 } from "react-icons/go";
 import FileElement from "./FileElement";
-import {
+import Menu from "@mui/material/Menu";
-    Menu,
+import MenuItem from "@mui/material/MenuItem";
-    MenuItem,
-} from "@mui/material";
 import AddFileDialog from "./AddFileDialog";
 
 export default function DirElement({
@@ -108,7 +106,13 @@ export default function DirElement({
                     {lang.menu.delete}
                 </MenuItem>
             </Menu>
-            <AddFileDialog lang={lang} defaultPath={fullPath + "/"} open={addOpen} addFile={addFile} handleClose={handleAddClose} />
+            <AddFileDialog
+                lang={lang}
+                defaultPath={fullPath + "/"}
+                open={addOpen}
+                addFile={addFile}
+                handleClose={handleAddClose}
+            />
             <div style={{ marginLeft: "0.5cm" }} className="dirChildren">
                 {collapsed ? null : (
                     <div>

src/components/playground/FileView/FileElement.tsx

@@ -1,14 +1,12 @@
-import {
+import Button from "@mui/material/Button";
-    Button,
+import Dialog from "@mui/material/Dialog";
-    Dialog,
+import DialogActions from "@mui/material/DialogActions";
-    DialogActions,
+import DialogContent from "@mui/material/DialogContent";
-    DialogContent,
+import DialogContentText from "@mui/material/DialogContentText";
-    DialogContentText,
+import DialogTitle from "@mui/material/DialogTitle";
-    DialogTitle,
+import Menu from "@mui/material/Menu";
-    Menu,
+import MenuItem from "@mui/material/MenuItem";
-    MenuItem,
+import TextField from "@mui/material/TextField";
-    TextField,
-} from "@mui/material";
 import type { PlaygroundExplorerLang } from "@utils/playground";
 import React from "react";
 import { useState } from "react";

src/components/playground/FileView/index.tsx

@@ -5,7 +5,8 @@ import type {
 } from "@utils/playground";
 import DirElement from "./DirElement";
 import FileElement from "./FileElement";
-import { Menu, MenuItem } from "@mui/material";
+import MenuItem from "@mui/material/MenuItem";
+import Menu from "@mui/material/Menu";
 import React, { useState } from "react";
 import AddFileDialog from "./AddFileDialog";
 

src/utils/material-ui-theme.ts

@@ -1,31 +1,34 @@
-import { createTheme } from '@mui/material/styles';
+import { createTheme } from "@mui/material/styles";
 
-export const customTheme = createTheme({
+export function customTheme(mode: "light" | "dark") {
-  palette: {
+    return createTheme({
-    primary: {
+        palette: {
-      light: '#a700c3',
+            mode,
-      main: '#a400c0',
+            primary: {
-      dark: '#a400c0',
+                light: "#a700c3",
-      contrastText: '#fff',
+                main: "#a700c3",
-    },
+                dark: "#a700c3",
-    secondary: {
+                contrastText: "#fff",
-      light: '#ff7961',
+            },
-      main: '#f44336',
+            secondary: {
-      dark: '#ba000d',
+                light: "#ff7961",
-      contrastText: '#000',
+                main: "#f44336",
-    },
+                dark: "#ba000d",
-  },
+                contrastText: "#000",
-  typography: {
+            },
-    fontFamily: [
+        },
-      '-apple-system',
+        typography: {
-      'BlinkMacSystemFont',
+            fontFamily: [
-      '"Segoe UI"',
+                "-apple-system",
-      '"Helvetica Neue"',
+                "BlinkMacSystemFont",
-      'Arial',
+                '"Segoe UI"',
-      'sans-serif',
+                '"Helvetica Neue"',
-      '"Apple Color Emoji"',
+                "Arial",
-      '"Segoe UI Emoji"',
+                "sans-serif",
-      '"Segoe UI Symbol"',
+                '"Apple Color Emoji"',
-    ].join(','),
+                '"Segoe UI Emoji"',
-  },
+                '"Segoe UI Symbol"',
-});
+            ].join(","),
+        },
+    });
+}