lesson 22 solution

React-in-Thai · Sep 7, 2024 · 249164b · 249164b
1 parent 71194f4
commit 249164b
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,3 +1,6 @@
+import { useColorScheme } from "@mui/material/styles";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
 import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
 import TextField from "@mui/material/TextField";
@@ -11,9 +14,30 @@ import Divider from "@mui/material/Divider";
 import SvgIcon from "@mui/material/SvgIcon";
 import AppTheme from "./AppTheme";
 
+function ColorModeToggle() {
+  const { mode, setMode } = useColorScheme();
+  if (!mode) {
+    return null;
+  }
+  return (
+    <Select
+      value={mode}
+      onChange={(e) => {
+        setMode(e.target.value as "system" | "light" | "dark");
+      }}
+      sx={{ position: "fixed", top: "1rem", right: "1rem" }}
+    >
+      <MenuItem value="system">System</MenuItem>
+      <MenuItem value="light">Light</MenuItem>
+      <MenuItem value="dark">Dark</MenuItem>
+    </Select>
+  );
+}
+
 function App() {
   return (
     <AppTheme>
+      <ColorModeToggle />
       <Box
         sx={(theme) => ({
           padding: "2rem",